The countdown is simply to use js new date () to create the Jane time, and then use settimeout to regularly update the number in the div, next I will introduce the example of a countdown code based on this principle.
A few days ago, the boss said he was writing down the countdown, but today it's still in my hands.
The effect is good. It is not online yet, or we will provide connections to our readers to see the effect of js countdown.
The Code is as follows: |
Copy code |
<Script> Window. onload = countdown (); Function countdown (time ){ Var djs = time; Var B = Math. round (new Date (). getTime ()/1000 ); Var cc = djs-B; Var d = Math. floor (cc/(3600*24 )); Var h = Math. floor (cc-d * 3600*24)/3600 ); Var m = Math. floor (cc-d * 3600 * 24-h * 3600)/60 ); Var s = Math. floor (cc-d * 3600 * 24-h * 3600-m * 60 ); Certificate ('{daya'{.html (d ); Certificate ('{hoursa'}.html (h ); Certificate ('{minua'{.html (m ); Certificate ('eclipsecoa'apps.html (s ); SetTimeout ("countdown ()", 1000 ); }
</Script>
|
The code is still relatively streamlined. We can see a huge JS countdown on the Internet. No suitable ones. Refer to the js countdown code written by others.
The countdown code found in the learning process
The Code is as follows: |
Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/> <Title> JS countdown (hour, minute, second) </title> <Script language = "javascript" type = "text/javascript"> Var integer = 1000; Function ShowCountDown (year, month, day, divname) { Var now = new Date (); Var endDate = new Date (year, month-1, day ); Var leftTime = endDate. getTime ()-now. getTime (); Var leftsecond = parseInt (leftTime/1000 ); // Var day1 = parseInt (leftsecond/(24*60*60*6 )); Var day1 = Math. floor (leftsecond/(60*60*24 )); Var hour = Math. floor (leftsecond-day1*24*60*60)/3600 ); Var minute = Math. floor (leftsecond-day1 * 24*60*60-hour * 3600)/60 ); Var second = Math. floor (leftsecond-day1 * 24*60*60-hour * 3600-minute * 60 ); Var cc = document. getElementById (divname ); Cc. innerHTML = "" + year + "year" + month + "month" + day + "and: "+ day1 +" day "+ hour +" hour "+ minute +" minute "+ second +" second "; } Window. setInterval (function () {ShowCountDown (2010,4, 20, 'divdown1 ') ;}, interval ); </Script> </Head> <Body> <Div id = "divdown1"> </div> </Body> </Html>
|
Example 2
The Code is as follows: |
Copy code |
<Script type = "text/javascript"> Startclock (); Var timerID = null; Var timerRunning = false; Function showtime (){ Today = new Date (); Var year = Today. getFullYear (); Document. getElementById ("next_yeat"). innerHTML = year + 1; Var NowHour = Today. getHours (); Var NowMinute = Today. getMinutes (); Var NowMonth = Today. getMonth (); Var NowDate = Today. getDate (); Var NowYear = Today. getYear (); Var NowSecond = Today. getSeconds (); If (NowYear <2000) NowYear = 1900 + NowYear; Today = null; Hourleft = 23-NowHour Minuteleft = 59-NowMinute Secondleft = 59-NowSecond Yearleft = year-NowYear Monthleft = 12-NowMonth-1 Dateleft = 31-NowDate If (Secondleft <0) { Secondleft = 60 + Secondleft; Minuteleft = Minuteleft-1; } If (Minuteleft <0) { Minuteleft = 60 + Minuteleft; Hourleft = Hourleft-1; } If (Hourleft <0) { Hourleft = 24 + Hourleft; Dateleft = Dateleft-1; } If (Dateleft <0) { Dateleft = 31 + Dateleft; Monthleft = Monthleft-1; } If (Monthleft <0) { Monthleft = 12 + Monthleft; Yearleft = Yearleft-1; } Temp = Yearleft + 'year, '+ Monthleft +' month, '+ Dateleft +' day, '+ Hourleft +' hour, '+ Minuteleft +' minute, '+ Secondleft + 'second '; Document. form1.left. value = Temp; TimerID = setTimeout ("showtime ()", 1000 ); TimerRunning = true; } Var timerID = null; Var timerRunning = false; Function stopclock (){ If (timerRunning) ClearTimeout (timerID ); TimerRunning = false; } Function startclock (){ Stopclock (); Showtime (); } // --> </Script> |
Finally, this is a reference.
The Code is as follows: |
Copy code |
<Div id = "m1"> </div> <Script type = "text/javascript"> Window. onload = function () {daojishi ()}; Function daojishi () { Var day = hour = minitus = second = MS = 0; Var year = new Date (). getFullYear () + 1; Var endtime = new Date (year, 0, 1); // End Time Var todaytime = new Date (); // current time Var tmp = endtime-todaytime; Day = Math. floor (tmp/ 86400000 ); Tmp = (new Date (year, 86400000)-new Date () %; Hour = Math. floor (tmp/3600000 ); Tmp % = 3600000; Minitus = Math. floor (tmp/60000 ); Tmp % = 60000; Second = Math. floor (tmp/1000 ); Var str = "from" + year + "and" + day + "day" + hour + "hour" + minitus + "Minute" + second + "second "; Document. getElementById ("m1"). innerHTML = str; SetTimeout ("daojishi ()", 1000 ); } </Script> |
The display time is 35 days, 8 hours, 26 minutes, and 47 seconds from January 1, 2014.