This article shares with you the javascript implementation of a countdown and limited time rush to purchase, with an accurate countdown to milliseconds for your reference. The specific content is as follows
1. Reproduction diagram
The picture below is the limited-time grab effect on Juhuasuan
2. Knowledge required to achieve the effect of limited time grabbing : Javascript Date() object
Date() returns the current date and event
getYear() returns the year and get the best use of the year
getFullYear() method to operate (full format such as 2016)
getMonth() returns the month value (starting from 0, +1)
getDay() returns the day of the week (0-6)
getHours() returns the number of hours (0-23)
getMinutes() returns the number of minutes (0-59)
getSeconds() returns seconds
getTime() returns the number of milliseconds
Of course, we may not use all the above calling methods, but it depends on your own needs. Without further ado, let's just upload the code:
1. HTML page code:
<p></p>
We put the countdown content in the <p> tag with class left-time.
2. JS script:
$(function(){ function leftTime(){ var endTime = new Date("2016/5/20,12:00:00");//End time var curTime = new Date();//Current time var leftTime = parseInt((endTime.getTime() - curTime.getTime())/1000);//Get time difference//Hours, minutes and seconds need to be modulus operation var d = parseInt(leftTime/(60*60*24)); var h = parseInt(leftTime/(60*60)%24); var m = parseInt(leftTime/60%60); var s = parseInt(leftTime%60); var ms = parseInt(((endTime.getTime() - curTime.getTime())/100)%10); var txt = "Remaining: "+d+"days"+h+"hours"+m+"mins+s+"."+ms+"seconds"; $(".left-time").text(txt); if(leftTime<=0){ $(".left-time").text("Telecomb end");} }; leftTime(); var set = setInterval(leftTime,100);});The above js implements a simple limited-time grab example. The parseInt() method is rounding, and getTime() converts time into milliseconds. In addition to the parseInt() method, it can also be replaced by the Math.floor() rounding method.
Finally, remember not to forget to give if() the content that needs to be displayed when the time is over, otherwise unnecessary small bugs will occur!