Home > Developer > JavaScript
The key to the implementation of this effect is the use of date objects and settimeout.
A total of three examples, the HTML structure as follows, do not add CSS style.
<body> Current time:<p id= "P1" ></p> college entrance countdown: <p id= "P2" ></p> timed Rush: <p Id= "P3" ></p></body>
The main experience of JavaScript implementation
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
functionshowtime1 () {varNowdate=NewDate ();//Create a Date object nowdate to get the current time varYear=nowdate.getfullyear (),//Get yearMonth=nowdate.getmonth () +1,//get the Month, GetMonth () get 0-11, need to add 1Date=nowdate.getdate (),//get a Japanese copyDay=nowdate.getday (),//get the day of the Week, GetDay () get 0-6week=["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], H=nowdate.gethours (), M=nowdate.getminutes (), S=nowdate.getseconds (), H=checktime (h),//function Checktime for formatting, minutes, secondsm=Checktime (m), S=Checktime (s); P1.innerhtml=year+ "Year" +month+ "month" +date+ "Day" +week[day]+h+ ":" +m+ ":" +s; SetTimeout (showtime1,1000);//repeatedly executes the function itself}
The checktime functions are as follows:
function Checktime (i) { if (i<10) { i= "0" +i; } return i;}Because usually see the time format is usually 00:00:01, and gethours,getminutes,getseconds get format is 0 to 9, not 00 to 09 such format. So in the process of changing from 9 to 10, there is a number that becomes a double-digit number, which is also changed from 59 seconds to 0 seconds or 59 points to 0 points or 23 o'clock to 0 o'clock.
For example, 23:59:59 next second should be changed to 00:00:00, if the Checktime function is not processed, it will become 0:0:0, which is a bit of a unity in format, but also visually there is an increase or decrease in the number of mutations. (the next two examples do not use the Checktime function to deal with the time and seconds!!!) )
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 end time var Lefttime=endtime.gettime ()-nowtime.gettime (), // Leftd=math.floor (lefttime/(1000*60*60*24)),//Calculation days LEFTH=MATH.F Loor (lefttime/(1000*60*60)%24),//Calculation hours Leftm=math.floor (lefttime/(1000*60)%60),//Count of minutes Lefts=math.floor (Leftti ME/1000%60);//Calculate the number of seconds p2.innerhtml=leftd+ "Day" +lefth+ ":" +leftm+ ":" +LEFTS; SetTimeout (showTime2, 1000); } One of the more important points:
① the time at which the definition ends Endtime=new date ("2017/6/6") is a Date object with a parameter by new, and the direct new date () is directly fetched to the current time;
The ②gettime () method gets the number of milliseconds from January 1, 1970.
③ days, hours, minutes and seconds of calculation,% (modulo operation). Get the number of milliseconds to end the distance (the number of milliseconds left), divide by 1000 to get the number of seconds left, divide by 60 to get the remaining minutes, and divide by 60 to get the remaining number of hours. Divide by 24 to get the number of days left. The number of seconds remaining lefttime/1000 modulo 60 gets the number of seconds, the remaining minutes lefttime/(1000*60) modulo 60 to get the minutes, the remainder of the hours modulo lefttime/(1000*60*60) modulo 24 to get the number of hours.
3. Time-limited snapping countdown effect
function Showtime3 () { var nowtime=New date (), Endtime=new date ("2020/1/1,00:00: "),// set 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+ "Days" +h+ "hours" +m+ "minutes" +s+ "seconds"
; }
In fact, the same as the second example, the difference is the setting of the end time new Date ("2020/1/1,00:00:00")
The following is the complete code
<! DOCTYPE html>Checktime (i) {if (i<10) {i= "0" +I } returnI } window.onload=function() {var P1=document.getelementbyid ("P1")), P2=document.getelementbyid ("P2"); Showtime1 (); Showtime2 (); Showtime3 ();
} functionShowtime1 () {var nowdate=newDate (); var year=nowdate.getfullyear (),//year month=nowdate.getmonth () +1,//month date=nowdate.getdate (),//day week=["Sunday", "Monday", " Tuesday "," Wednesday "," 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); } functionShowtime2 () {var nowtime=newDate (), Endtime=new date ("2017/6/6"); var lefttime=endtime.gettime ()- nowtime.gettime (), Leftd=math.floor (lefttime/(1000*60*60*24)), lefth= Math.floor (lefttime/(1000*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, + ),} 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+ "Days" +h+ "hours" +m+ "minutes" +s+ "seconds" ; SetTimeout (Showtime3, + );} </script> Current time: <p id= "P1" ></p> college entrance countdown: <p id= "P2" ></p> time-limited snapping: <p id= "P3" ></p> </body>
#行者杰客 #
For the Chang Cheng, the traveler often. The infant does not have the different and the person also, often for but pail, often does the endlesslyJavaScript effect Implementation (4)--Current time and countdown effects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
