Home > Developer > JavaScript
Javascript special effects-A simple example of the current time and countdown effect, and the current javascript time
The key to achieving this effect is the use of the Date object and setTimeout.
There are three examples. The HTML structure is as follows and no CSS style is added.
<Body> current time: <p id = "p1"> </p> countdown to the College Entrance Examination: <p id = "p2"> </p> limited-time flash sales: <p id = "p3"> </p> </body>
Mainly understand the implementation of javascript
window.onload=function () { var p1=document.getElementById("p1"), p2=document.getElementById("p2"); p3=document.getElementById("p3"); showtime1(); showtime2(); showtime3();}
1. Simple display of the current time
Function showtime1 () {var nowdate = new Date (); // create the Date object nowdate to obtain the current time var year = nowdate. getFullYear (), // obtain the year month = nowdate. getMonth () + 1, // obtain the month. getMonth () returns 0-11 and requires 1 date = nowdate. getDate (), // get the day = nowdate. getDay (), // get a day in a week. getDay () gets 0-6 week = ["Sunday", "Monday", "Tuesday", "Wednesday ", "Thursday", "Friday", "Saturday"], h = nowdate. getHours (), m = nowdate. getMinutes (), s = nowdate. getSeconds (), h = checkTime (h), // function checkTime for formatting, minutes, seconds m = checkTime (m), s = checkTime (s ); p1.innerHTML = year + "year" + month + "month" + date + "day" + week [day] + h + ":" + m + ":" + s; setTimeout (showtime1, 1000); // execute the function itself repeatedly}
TheCheckTimeThe function is as follows:
function checkTime(i) { if (i<10) { i="0"+i; } return i;}
Because the time format is usually 00:00:01, and the format of getHours, getMinutes, and getSeconds is 0 to 9, not 00 to 09. So in the process of changing from 9 to 10, there is a single digit, Which is changed to two digits. Similarly, when the value of 59 seconds is changed to 0 seconds or 59 minutes, it is changed to 0 minutes or 23 seconds.
For example, at 23:59:59, the next second should be changed to 00:00:00. If the checkTime function is not used for processing, it will be changed to 0: 0. In this way, the format is a bit inconsistent, and there is also a sudden increase or decrease in the number of words. (In the next two examples, the checkTime function is not used to process the hour, minute, and second !!!)
2. Implement the countdown effect of the College Entrance Examination
Function showTime2 () {var nowtime = new Date (), // obtain the current time endtime = new Date (""); // define the end time var lefttime = endtime. getTime ()-nowtime. getTime (), // Number of milliseconds from the end time leftd = Math. floor (lefttime/(1000*60*60*24), // computing days lefth = Math. floor (lefttime/(1000*60*60) % 24), // calculated hours leftm = Math. floor (lefttime/(1000*60) % 60), // calculate the number of minutes lefts = Math. floor (lefttime/1000% 60); // calculates the number of seconds p2.innerHTML = leftd + "day" + lefth + ":" + leftm + ":" + lefts; setTimeout (showTime2, (1000 );}
Important points:
① Define the end time endtime = new Date ("") is a Date object with a parameter through new, directly new Date () is to directly get the current time;
② The getTime () method obtains the number of milliseconds from January 1, January 1, 1970.
③ Number of days, hours, minutes, And seconds, % (modulo operation ). Get the number of milliseconds (the number of milliseconds remaining) from the end time, divide by 1000 to get the remaining seconds, then divide by 60 to get the remaining minutes, and then divide by 60 to get the remaining hours. Divide by 24 to get the remaining days. Remaining seconds lefttime/1000 mode 60 get seconds, remaining minutes lefttime/(1000*60) Model 60 get minutes, remaining hours model lefttime/(1000*60*60) the number of hours in the 24 mode.
3. Time-limited flash sale countdown Effect
Function showtime3 () {var nowtime = new Date (), endtime = new Date ("2020/1/1, 00:00:00"), // set the end time lefttime = parseInt (endtime. getTime ()-nowtime. getTime ()/1000), d = Math. floor (lefttime/(60*60*24), h = Math. floor (lefttime/(60*60) % 24), m = Math. floor (lefttime/60% 60), s = Math. floor (lefttime % 60); p3.innerHTML = d + "day" + h + "Hour" + m + "Minute" + s + "second"; setTimeout (showtime3, (1000 );}
In fact, it is similar to the second example. The difference is that the end time is set to new Date ("2020/1/1, 00:00:00 ")
The complete code is as follows:
<! DOCTYPE html>The implementation of the above javascript special effects-A simple example of the current time and countdown effect is all the content shared by xiaobian. I hope to give you a reference and support for the help house.
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
