JQuery imitates Xiaomi mobile phone rush purchase page countdown effect

JQuery imitates Xiaomi mobile phone rush purchase page countdown effect_jquery

WBOY

Release： 2016-05-16 16:26:28

Original

1657 people have browsed it

1. Effect and function description

Tell users how much time is left for an activity by controlling time, accurate to seconds.

2. Implementation principle

First define the end time of the activity. The year must be accurate to milliseconds. After getting the current year to seconds, use the end time and subtract the current time. The remaining time will be determined by the time remaining. The time below is displayed and you can see how long it is until the deadline.

Main Code

Copy code The code is as follows:

var startTime = new Date();

//Get the current time 

startTime.setFullYear(2016, 5, 27);

//Call to set the year

startTime.setHours(23);

//Call to set the hour field of the specified time

startTime.setMinutes(59);

//Call to set the minute field of the specified time

startTime.setSeconds(59);

//Call to set the seconds field of the specified time

startTime.setMilliseconds(999);

//Call to set the millisecond field of the specified time

var EndTime=startTime.getTime();

//Get the ending time

var nMS = EndTime - NowTime.getTime();

//Subtract the current time from the end time to get the remaining time

var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));

//Define parameters to get the number of days

var nH = Math.floor(nMS/(1000*60*60)) % 24;

//Define parameters to get hour

var nM = Math.floor(nMS/(1000*60)) % 60;

//Define parameters to get minutes

var nS = Math.floor(nMS/1000) % 60;

//Define parameters to get seconds. These are the current time

3. Operating environment
IE6 IE7 IE8 and above Firefox and Google
It can be realized in Chrome browser

4. Create a new file for the compressed package of all pictures, and then unzip the package and put it into a folder. The compressed package of the pictures can be seen and downloaded at the bottom of the page. After downloading, there is no need to modify the folder name because it has already been written and The path within html5 matches

5. When saving the created html file, change the encoding type to (UTF-8 with signature) so that some Chinese characters can be displayed normally. Change the saving type (T) to (all files (*.*) ), put the html5 and decompressed image folders in the same folder

6. Code

Copy code The code is as follows:

7. After the countdown is completed, set the hidden attribute of the button to false, simple~

This code is taken from my project. Friends can use it with confidence. If you have any questions, please leave a message.