JS implementation countdown similar to group purchase site

First, demo and Effect show

To save time, I directly applied the penguin's interface as the background of the demo. Because it is a countdown, so need a fixed time, in order to n years later, a man opened the demo page is still in the countdown, so I set the countdown time to the July 30, 2050 noon 12 o'clock the whole, there are 40 years only to, because the age is longer, so it is necessary to display the remaining years and months. So, the effect of the last demo page is as follows:

You can really click here: Group Purchase Countdown Demo

Second, use

Countdown is actually some of the date class calculation and processing, mainly some tedious work. To save others ' effort and facilitate later use, I have encapsulated the countdown main processing method. The method name is: fnTimeCountDown(参数1, 参数2) .

Use the following, first, call the Countdown JS script, you can embed the script anywhere on the page:

<script type= "Text/javascript" src= "Http://www.zhangxinxu.com/study/js/timeCountDown.js" ></script>

Then, call the method fnTimeCountDown(参数1, 参数2) , so you can achieve the countdown effect, very simple.

Here's the point, which is about the parameters here. Parameter 1 refers to the time that is due. I personally recommend that you use the UTC () method to create a date object to pass to the date constructor. For example, DATE.UTC (2030, 6, 27, 16, 34), which means that July 27, 2030 161 is 34 minutes 0 seconds (the month needs to add 1), then replace this parameter with "parameter 1". Specifically, it is:

var d = DATE.UTC (2030, 6, +, +); Fntimecountdown (d, Parameter 2)

About Parameter 2, a little bit more complicated. Parameter 2 is an object, but also an object set, is a collection of Dom objects that display seconds, minutes, and values, and the object name is fixed, not defined by itself, otherwise no effect. With extensibility in mind, the object name is from the second to the year, as follows:

{sec: the Label object showing the value of seconds, Mini: The Label object that displays the minute value, hour: The Label object that displays the hour value, day: The Label object that displays the number of days, month     : the     label object that displays the month value,     Year: Label object showing number of years}

All of the above parameters are optional, and if not, the time change is not displayed, and if the DOM object corresponding to the parameter does not exist, there is no value change. If this is the first part of the group purchase countdown, as long as the following three sub-objects are sufficient:

{     sec: the Label object showing the value of seconds,     Mini: The Label object that displays the minute value,     hour: The Label object that displays the hour value}

For example, there are three tabs that show the remaining hours, minutes, and seconds, respectively, with the ID hour,mini,sec, as shown below:

<span id= "Hour" ></span> <span id= "Mini" ></span> min <span id= "SEC" ></span> seconds

Then the second parameter should be written like this:

var obj = {     Sec:document.getElementById ("SEC"),     mini:document.getElementById ("Mini"),     Hour: document.getElementById ("Hour")}

So the two parameters together are:

var d = DATE.UTC (2030, 6, +, +), var obj = {     Sec:document.getElementById ("SEC"),     mini:document.getElementBy Id ("Mini"),     hour:document.getElementById ("Hour")}fntimecountdown (d, obj);

The result of this instance code is as follows:
06 O'Clock 20 minutes 11 seconds

If it is not yet 2030, you should be able to see that the values in front of the preceding seconds are ticking down.

It is important to note that the object set of parameter 2 does not support jquery objects, only DOM objects, and if you need to support jquery objects, you need to modify the HTML () or text () method of innerHTML in the original JS method.

Finally, provide the next JS script download, you can click here: Timecountdown.js (1.75K, right –[target | link] Save As)

Iii. Brief concluding remarks

This script is only a simple test, and JS is still shallow, inevitably there are bugs or inaccuracies. If you find out, please correct me, not very grateful. Various forms of discussion and communication are also welcome.

Transfer from Zhang Xin Xu-Xin space-Xin Life
Original address: http://www.zhangxinxu.com/wordpress/?p=987

JS implementation countdown similar to group purchase site