javascript

Simple implementation of js countdown function

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