Js countdown effect (year, month, day, hour, minute, second)

As long as we use js settimeout and div to combine the countdown, we can achieve the display time per second. Below we have sorted out an example used in our work and shared it with you.

The countdown function is used in many previous activity pages.

The usage is as follows:

The Code is as follows:

Copy code

<Div class = "timer"> <Span id = "years"> 00 </span>: <Span id = "months"> 00 </span>: <Span id = "days"> 00 </span>: <Span id = "hours"> 00 </span>: <Span id = "minutes"> 00 </span>: <Span id = "seconds"> 00 </span> </Div> <Script type = "text/javascript"> // Obtain the current time of the Local Machine Var mydate = new Date (); // Console. log (mydate. getFullYear (), parseInt (mydate. getMonth () + 1, mydate. getDate (), mydate. getHours (), mydate. getMinutes (), mydate. getSeconds ()); Var futureDate = eval (Date. UTC (2014, 10, 30, 12, 0, 0 )); // Var nowDate = eval (Date. UTC (2013, 11, 15, 16, 36, 52 )); Var nowDate = eval (Date. UTC (mydate. getFullYear (), parseInt (mydate. getMonth () + 1, mydate. getDate (), mydate. getHours (), mydate. getMinutes (), mydate. getSeconds ())); Var obj = { Sec: document. getElementById ("seconds "), Mini: document. getElementById ("minutes "), Hour: document. getElementById ("hours "), Day: document. getElementById ("days "), Day: document. getElementById ("months "), Day: document. getElementById ("years ") } FnTimeCountDown (futureDate, obj, nowDate, function (){ // Console. log ('Time is up! '); }); </Script>

The js Code is as follows:

The Code is as follows:

Copy code

/* * Countdown implementation */ Var fnTimeCountDown = function (d, o, now, callback ){ Var f = { Zero: function (n ){ Var n = parseInt (n, 10 ); If (n> 0 ){ If (n <= 9 ){ N = "0" + n; } Return String (n ); } Else { Return "00 "; } }, Dv: function (){ D = d | Date. UTC (2050, 0, 1); // if no time is defined, we set the countdown Date to January 1, 2050. Var future = new Date (d ); Var nowTime = new Date (now ); // Second difference in the future Var dur = Math. round (future. getTime ()-nowTime. getTime ()/1000), pms = { Sec: "00 ", Mini: "00 ", Hour: "00 ", Day: "00 ", Month: "00 ", Year: "0" }; If (dur> 0 ){ Pms. sec = f. zero (dur % 60 ); Pms. mini = Math. floor (dur/60)> 0? F. zero (Math. floor (dur/60) % 60): "00 "; Pms. hour = Math. floor (dur/3600)> 0? F. zero (Math. floor (dur/3600) % 24): "00 "; // Pms. day = Math. floor (dur/86400)> 0? F. zero (Math. floor (dur/86400) % 30): "00 "; Pms. day = Math. floor (dur/86400)> 0? F. zero (Math. floor (dur/86400): "00 "; // Month, calculated in the actual average number of seconds per month Pms. month = Math. floor (dur/2629744)> 0? F. zero (Math. floor (dur/2629744) % 12): "00 "; // Year, calculated by 05:48:46 on the seventh day of the return year Pms. year = Math. floor (dur/31556926)> 0? Math. floor (dur/31556926): "0 "; } Return pms; }, Ui: function (){ If (o. sec ){ O. sec. innerHTML = f. dv (). sec; } If (o. mini ){ O. mini. innerHTML = f. dv (). mini; } If (o. hour ){ O. hour. innerHTML = f. dv (). hour; } If (o. day ){ O. day. innerHTML = f. dv (). day; } If (o. month ){ O. month. innerHTML = f. dv (). month; } If (o. year ){ O. year. innerHTML = f. dv (). year; } Now = now more than 1000; If (f. dv (). sec = "00" & f. dv (). mini = "00" & f. dv (). hour = "00" & f. dv (). day = "00" & f. dv (). month = "00" & f. dv (). year = "0 "){ If (callback ){ Callback (); } } SetTimeout (f. ui, 1000 ); } }; F. ui (); };