The refresh time is not necessarily the best 50 milliseconds, but considering the human eye recognition ability, it is meaningless to refresh the frequency too fast. In addition, we should consider two requirements: 1. There is still a certain time in the future. How long; 2. How long has it been from a certain time in the past to the present.
<div id="timeB"></div>
<script type="text/javascript">
function countDown(endTime, startTime = new Date()) {//In order to meet some special cases, here is a parameter of start time and attach a default value. In general, you only need to pass in the end time.
let date = endTime - startTime; // time difference
let mmsec = date % 1000 // remaining milliseconds
let seconds = Math.floor(date / 1000 % 60); //Remaining seconds
let minutes = Math.floor(date / 1000 / 60 % 60); //The remaining minutes
let hour = Math.floor(date / 1000 / 60 / 60 % 24); //Number of remaining hours
let day = Math.floor(date / 1000 / 60 / 60 / 24); //天数
return {
day: day
, hour: hour
, minutes: minutes
, seconds: seconds
, mmsec: mmsec
}
}
const timeB = document.querySelector('#timeB');
// start the timer
setInterval(() => {
let time = countDown(new Date(2016, 8, 1));//Only need to pass in the end time
timeB.innerHTML = "There is still 00:00 on September 1st, 2016" + time.day + "day" + time.hour + "hour" + time.minutes + 'minute' + time.seconds + 'second' + time.mmsec + "milliseconds";
}, 50);
</script>
Effect:
