Of Stack

Native js realizes the countdown function of holiday time

  • 2021-07-12 05:01:08
  • OfStack

Key points of knowledge

1. Implementation principle:

Use end time-current time = time difference

Every time the current time passes 1 second, the time difference is naturally 1 second less

Therefore, it takes 1 second to update the current time once to achieve the countdown effect

2. What needs attention is the conversion between time and the processing of the obtained values

3. Methods used: 


obj.getTime() // Convert to milliseconds 
Math.floor() // Round the decimal point down to the result 1 Integer 
50%24 //  This is the method of finding the remainder of values, which means   If there is 50 Hours, 1 Days 24 Hours   The result of this is that   The remainder is 2

There are detailed comments in the complete code for the operation and processing of specific values

Complete code

Note: The code comes with a standard format for displaying the current time and countdown days 


<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
</style>
</head> 
<body>
 <div id="time"></div>
 <br/>
 <div id="day"></div>
 <br/>
 <div id="tm"></div>
 <script type="text/javascript"> 
 // Execute multiple function perfection schemes immediately after the page is loaded. 
 function addloadEvent(func){
  var oldonload=window.onload;
  if(typeof window.onload !="function"){
   window.onload=func;
  }
  else{
   window.onload=function(){
    if(oldonload){
     oldonload(); 
    }
    func();
   }
  }
 }
 addloadEvent(showTime);
 addloadEvent(day);
 addloadEvent(tb);
 // Execute multiple function perfection schemes immediately after the page loads over . 
 // Day, hour, second and minute countdown 
 function tb(){
 var myDate=new Date();// Get the current time 
 var endtime=new Date("2018,1,1");// Get the end time 
 // Convert into seconds   Rounding down the decimal point 
 var ltime=Math.floor((endtime.getTime()-myDate.getTime())/1000);
 //console.log(ltime)
 // Conversion all day   Rounding down the decimal point 
 var d=Math.floor(ltime/(24*60*60));
 // Convert into hours and take the remainder of the number of days removed (that is, hours)   Rounding down the decimal point 
 var h=Math.floor(ltime/(60*60)%24);
 // Convert to minutes and take the remainder after removing hours (that is, minutes)   Rounding down the decimal point 
 var m=Math.floor(ltime/60%60);
 // Convert to minutes and take the remainder (that is, seconds) without minutes   Rounding down the decimal point 
 var s=Math.floor(ltime%60);
 document.getElementById("tm").innerHTML=" Distance 2018 There are also New Year's Day in :"+d+" Days "+h+" Hours "+m+" Minutes "+s+" Seconds ";
 if(ltime<=0){
  document.getElementById("tm").innerHTML=" Happy New Year's Day! ";
  clearTimeout(tb);
 }
 setTimeout(tb,1000);
 }
 // Before when seconds are single digits + String 0
 function checkTime(i){
 return i<10? "0"+i:""+i;
 }
 // Current time standard format 
 function showTime(){
 var myDate=new Date();// Get the current time 
 var year=myDate.getFullYear();// Get Year 
 var month=myDate.getMonth()+1;// Get the month is 0-11 The number of, so +1
 var date=myDate.getDate();// Day 
 var day=myDate.getDay();//
 var h=myDate.getHours();// Hours 
 var m=myDate.getMinutes();// Minutes 
 var s=myDate.getSeconds();// Seconds 
 checkTime(m);
 checkTime(s);
 //console.log(day)
 var week=" Day 123456".charAt(day);
 document.getElementById("time").innerHTML=year+" Year "+month+" Month "+date+" Day "+" Week "+week+h+":"+m+":"+s;
 setTimeout(showTime,1000); 
 }
 // Countdown days calculation 
 function day(){
 var myDate=new Date();// Get the current time 
 var endtime=new Date("2018,1,1");// Get the end time 
 // Convert it to milliseconds and then subtract it to be the time difference, and then divide it by 1 The number of milliseconds of days results with decimal points, using math Method advance 1 Bit rounding 
 var ltime=Math.ceil((endtime.getTime()-myDate.getTime())/(24*60*60*1000));
 document.getElementById("day").innerHTML=" Distance 2018 There are also New Year's Day in :"+ltime+" Days ";
 }
 </script>
</body> 
</html>
Related articles: