Simple implementation of js countdown function

2021-07-21 06:10:44
OfStack

This article example for everyone to share the specific code of js countdown, mainly using JS Date object and timer setInterval, for your reference, the specific content is as follows


<!DOCTYPE html> 
<html> 
 <head> 
 <title>  Countdown  </title> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <meta name="Generator" content="EditPlus"> 
 <meta name="Author" content=""> 
 <meta name="Keywords" content=""> 
 <meta name="Description" content=""> 
 </head> 
<script> 
var timstr= '2020-09-03'; 
var _timer; 
 
// Executed after the page is loaded  
window.onload = function() 
{ 
 timerfunc();// Call timer  
 document.getElementById('timSpan').innerHTML = timstr; // Output the target time  
} 
 
// Timer method  
timerfunc = function(){ 
 _timer = setInterval('tfunc()',1000);// Generate timer  
} 
 
// Time processing method  
tfunc = function(){ 
 var ntim = new Date(); // Current timestamp  
 var _tm = timstr.replace(/-/g,'\/'); // In the target time field string - Replace with /, The need for formatting  
 var ftim = new Date(_tm); // Formatting target time  
 var rs = timGap(ntim.getTime(),ftim.getTime()); // Call the time difference method  
 var _str = rs.d+' Days '+rs.h+' Hours '+rs.m+' Minutes '+rs.s+' Seconds '; // Splice the returned data to a string  
 document.getElementById('gap').innerHTML = _str; // Output  
} 
 
// Time difference taking method  
timGap = function(ntim,ftim){ 
 var date3 = ftim - ntim; // Time difference milliseconds  
 
 var days = Math.floor(date3/(24*3600*1000)); // Number of days  
 
 
 var level1 = date3%(24*3600*1000);// The number of milliseconds left after taking days  
 var hours = Math.floor(level1/(3600*1000)); // Fetch hours  
 
 var level2 = level1%(3600*1000);// The number of milliseconds left after taking the hour  
 var minutes = Math.floor(level2/(60*1000));// Take minutes  
 
 var level3 = level2%(60*1000);// The number of milliseconds left after taking minutes  
 var seconds = Math.floor(level3/1000);// Take seconds  
 
 // Define an object  
 var tim = {}; 
 // Assignment  
 tim['d'] = days; 
 tim['h'] = hours; 
 tim['m'] = minutes; 
 tim['s'] = seconds; 
 //console.log(tim); 
 return tim; // Return data  
} 
</script> 
 <body> 
 <div> Distance <span id="timSpan"></span> And  <span id="gap"></span></div> 
 </body> 
</html>

For more articles about countdown, please see the special topic: "Countdown Function"

More JavaScript clock effects click to view: JavaScript clock effects topic