A beautiful and practical Countdown instance code _jquery based on jquery

The countdown effect has a wide range of applications, such as the countdown to the Olympic Games, college entrance countdown and the countdown to the holiday, this section to share a more beautiful and practical countdown effect.

The code example is as follows:

<! DOCTYPE html>  

The above code to achieve our requirements, you can realize the countdown effect of seconds to days, the following is an introduction to the implementation process.

I. Principle of realization:

The simple principle is to get the timestamp of the expiration time minus the time stamp of the current time, which is the difference in seconds between the two, and then dividing by the number of seconds by 3600 is the difference between the number of hours, and then divided by 24, and then use the Math.floor () function for rounding, is the difference The following is the principle of getting hours, minutes, and seconds. Using the Timer function to call the corresponding function every second, the countdown effect is achieved.

Two. Code comments:

1.$ (function () {}) to execute code in the function when the document structure is completely loaded.
2.countDown ("2016/2/3 6:30:59", "#colockbox1"), calling the function, the first argument is the expiration time, and the second is the div's id attribute value.
3.function Countdown (Time,id) {}, declare this function.
4.var day_elem=$ (ID). Find ('. Day '), get the object with the div class attribute value of day.
5.var hour_elem=$ (ID). Find ('. Hour '), get the object under div class attribute value hour.
6.var minute_elem=$ (ID). Find ('. Minute '), get the object under div class attribute value minute.
7.var second_elem=$ (ID). Find ('. Second '), get the object under div class attribute value second.
8.var end_time=new Date (time). GetTime () to get the timestamp of the expiration event.
9.var sys_second= (End_time-new Date (). GetTime ())/1000, gets the number of seconds between the expiration time and the current time difference.
10.var Timer=setinterval (function () {},1000), performs functions once every second.
11.if (sys_second>1) If the difference in seconds is greater than 1.
12.sys_second-=1, second minus one.
13.var Day=math.floor ((sys_second/3600)/24) to get the difference in number of days.
14.var Hour=math.floor ((sys_second/3600)%24) to obtain the difference in the number of hours, note that the following is modulo operation.
15.var Minute=math.floor ((SYS_SECOND/60)%60) to get the difference in minutes.
16.var Second=math.floor (sys_second%60) to get the difference in seconds.
17.$ (Day_elem). Text (day) to write days to the SPAN element.
18.$ (Hour_elem). Text (hour<10?) 0 "+hour:hour", writes the hour to span, if the hour number is less than 10, the front plus 0, the same reason behind.
19.clearInterval (timer), if the difference of seconds to 0, stop the timer function setinterval execution.

The above content is small to share for everyone based on jquery to achieve beautiful and practical countdown code, I hope this article to share can bring help to everyone.