The key to implementing this effect is the use of Date objects and setTimeout.
There are three examples in total. The HTML structure is as follows, so no CSS style is added.
<body> Current time: <p id="p1"></p> College Entrance Examination Countdown: <p id="p2"></p> Limited time rush: <p id="p3"></p></body>
Mainly understand the implementation of javascript
window.onload=function () { var p1=document.getElementById("p1"), p2=document.getElementById("p2"); p3=document.getElementById("p3"); showtime1(); showtime2(); showtime3();}1. Simple implementation of the current time display
function showtime1() { var nowdate=new Date();//Create the Date object nowdate to get the current time var year=nowdate.getFullYear(),//Get year month=nowdate.getMonth()+1,//Get month, getMonth() gets 0-11, and you need to add 1 date=nowdate.getDate(),//Get the day of the week, getDay() gets 0-6 week=["Sunday","Monday","Tuesday","Thursday","Friday","Saturday", h=nowdate.getHours(), m=nowdate.getMinutes(), s=nowdate.getSeconds(), h=checkTime(h),//Function checkTime is used for formatting time, minutes, seconds m=checkTime(m), s=checkTime(s); p1.innerHTML=year+"year"+month+"month"+date+"day"+week[day]+h+":"+m+":"+s; setTimeout(showtime1, 1000);//Repeat the function itself}The checkTime function is as follows:
function checkTime(i) { if (i<10) { i="0"+i; } return i;}Because the time format you usually see is generally 00:00:01, and getHours, getMinutes, getSeconds get formats 0 to 9, not 00 to 09. Therefore, in the process of changing from 9 to 10, there is a single digit that becomes a double digit, and it also becomes 0 when the charge is 59 seconds to 0 seconds or 59 minutes to 0 minutes or 23.
For example, 23:59:59 should change to 00:00:00 in the next second; if the checkTime function is not used for processing, it will change to 0:0:0, which will make the format a little inconsistent, and there are also visual mutations of increasing or decreasing word count. (The next two examples do not use the checkTime function to process time, minute and second!!!)
2. The countdown effect of college entrance examination is realized
function showTime2() { var nowtime=new Date(),//get the current time endtime=new Date("2017/6/6");//Define the end time var lefttime=endtime.getTime()-nowtime.getTime(),//The milliseconds from the end time leftd=Math.floor(lefttime/(1000*60*60*24)),//The number of days leftth=Math.floor(lefttime/(1000*60*60)%24),//The number of hours leftm=Math.floor(lefttime/(1000*60)%60),//The number of minutes leftts=Math.floor(lefttime/1000%60);//The number of seconds p2.innerHTML=leftd+"day"+lefth+":"+leftm+":"+lefts; setTimeout(showTime2, 1000); }Among them, the more important points:
① Define the end time endtime=new Date("2017/6/6") is to use new Date object with parameters, and directly new Date() is to directly obtain the current time;
② The getTime() method obtains the number of milliseconds from January 1, 1970.
③ Calculation of days, hours, minutes and seconds, % (modulo operation). Get the milliseconds (remaining milliseconds) from the end time, divide by 1000 to get the remaining seconds, divide by 60 to get the remaining minutes, and divide by 60 to get the remaining hours. Divided by 24 to get the remaining days. Remaining seconds lefttime/1000 Module 60 gets the number of seconds, remaining minutes lefttime/(1000*60) Module 60 gets the number of minutes, remaining hours lefttime/(1000*60*60) Module 24 gets the number of hours.
3. Countdown effect of limited-time rush purchase
function showtime3() { var nowtime=new Date(), endtime=new Date("2020/1/1,00:00:00"),//Set the end time lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000), d=Math.floor(lefttime/(60*60*24)), h=Math.floor(lefttime/(60*60)%24), m=Math.floor(lefttime/60%60), s=Math.floor(lefttime%60); p3.innerHTML=d+"day"+h+"hour"+m+"minute"+s+"second"; setTimeout(showtime3, 1000); }In fact, it is similar to the second example, the difference is that the end time is set new Date("2020/1/1,00:00:00")
Below is the complete code
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Countdown effect</title> <script type="text/javascript"> function checkTime(i) { if (i<10) { i="0"+i; } return i; } window.onload=function () { var p1=document.getElementById("p1"), p2=document.getElementById("p2"); showtime1(); showtime2(); showtime3(); } function showtime1() { var nowdate=new Date(); var year=nowdate.getFullYear(),//Year month=nowdate.getMonth()+1,//Month date=nowdate.getDate(),//Day week=["Sunday","Monday","Tuesday","Thursday","Friday","Saturday"], day=nowdate.getDay(),//getDay get 0-6 h=nowdate.getHours(), h=checkTime(h), m=nowdate.getMinutes(), m=checkTime(m), s=nowdate.getSeconds(), s=checkTime(s); p1.innerHTML=year+"year"+month+"month"+date+"day"+week[day]+h+":"+m+":"+s; setTimeout(showtime1, 1000); } function showtime2() { var nowtime=new Date(), endtime=new Date("2017/6/6"); var lefttime=endtime.getTime()-nowtime.getTime(), leftd=Math.floor(lefttime/(1000*60*60*24)), left=Math.floor(lefttime/(1000*60*60*60)%24), leftm=Math.floor(lefttime/(1000*60)%60), lefts=Math.floor(lefttime/1000%60); p2.innerHTML=leftd+"day"+lefth+":"+leftm+":"+lefts; setTimeout(showtime2, 1000); } function showtime3() { var nowtime=new Date(), endtime=new Date("2020/1/1,00:00:00"), lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000), d=Math.floor(lefttime/(60*60*24)), h=Math.floor(lefttime/(60*60)%24), m=Math.floor(lefttime/60%60), s=Math.floor(lefttime%60); p3.innerHTML=d+"day"+h+"hour"+m+"minute"+s+"seconds"; setTimeout(showtime3, 1000); } </script></head><body> Current time: <p id="p1"></p> College entrance examination countdown: <p id="p2"></p> Limited time rush: <p id="p3"></p></body></html>The above javascript special effects implementation - a simple example of the current time and countdown effect is all the content I have shared with you. I hope you can give you a reference and I hope you can support Wulin.com more.