Home > Developer > JavaScript
Countdown is very common, such as from the XX activity and xx days xx hours xx seconds, and then reduced by the second, the realization is very simple, I just want to record the process of a little pit.
First on the code:
<HTML> <Head> <MetaCharSet= "UTF-8" > <title>Task0002_2</title> </Head> <Body> <inputID= "Input-date"type= "text" /> <ButtonID= "BTN">Click</Button> <P>Distance<spanID= "Show-date">yyyy mm MONTH DD Day</span>And also<spanID= "Time-different">XX days xx hours xx minutes xx seconds</span> </P> <Scriptsrc= "./js/util.js"></Script> <Scriptsrc= "./js/task0002_2.js"></Script> </Body></HTML>
After typing in a format such as XXXX-XX-XX, click the button and the countdown starts below.
The idea is simple: convert the input time to date, then get the current time, subtract two times, and convert it to days/hours/minutes/seconds.
Now look at my JS code, I did not make a malformed judgment, the default input time format is correct.
addevent ($ ("#btn"), "click", DisplayTime); //Addevent is my own encapsulated function, which is actually the event binding of the elementfunctionDisplayTime () {var$inputDate = $ ("#input-date"). Value;//Get Date string
varDate =NewDate (Date.parse ($inputDate));//Construct Date StringDate.sethours (0); Date.setminutes (0); Date.setseconds (0); Console.log (Date.tostring ()); varstr = Date.getfullyear (). ToString () + "year" + (Date.getmonth () +1). ToString () + "month" + date.getdate (). ToString () + "Day"; $("#show-date"). InnerHTML =str; Display (date);}//CountdownfunctionDisplay (date) {varNowdate =NewDate (); Console.log (Nowdate.tostring ()); varDifftime = Date.gettime ()-nowdate.gettime ();//The unit is milliseconds after subtracting varremain = difftime% parseint (1000 * 3600 * 24);//1000 * 3600 * 24, because the unit is milliseconds, this is the number of milliseconds in 1 days, do not need their own calculation, a formula out on the good, the remainder means that the remaining milliseconds is not enough a day, continue to count the number of hours left, and so on varDiffdate = Math.floor (Difftime/(1000 * 3600 * 24));//How many days are left? varDiffhour = Math.floor (Remain/(1000 * 3600)); Remain= remain% (1000 * 3600); varDiffminute = Math.floor (Remain/(1000 * 60)); Remain= remain% (1000 * 60); varDiffsecond = Math.floor (Remain/(1000)); varstr = diffdate + "Day" + Diffhour + "when" + Diffminute + "min" + Diffsecond + "SEC"; $("#time-different"). InnerHTML =str; //if it's not enough for 1 seconds, keep counting, or stop. if(Remain > 1000) {setTimeout (display,1000, date); }}
The above code is basically very understood, here is the point to note:
1.parse () returns the number of milliseconds from midnight January 1, 1970 to the specified date (string). The default is the 00:00 countdown to the specified date, so the data is constructed to sethours (), otherwise the default is 8 points
The result of division in 2.JavaScript is the default floating-point number, which is my console.log (2/3), the result is 0.66666666, need to use math.floor downward rounding
3.setTimeout to take parameters, be careful not to direct settimeout (display (date), 1000); so write, settimeout see JavaScript learning settimeout
4.getFullYear () returns the year from a Date object with a four-digit number, so it is best not to use getyear (). GetMonth () returns the month from the Date object (0 ~ 11), so remember to add one.
The countdown to JavaScript learning
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
