This article describes in detail how to implement the countdown Function Based on Javascript. If you are interested, refer to the example in this article to implement a countdown function. the countdown function is used in the project release time, or the countdown function of an activity.
The interface code structure should be completed first. I will not be so nice about this interface, just join in (O (pipeline _ pipeline) O Haha ~).
Code name
Countdown implementation
- 00Days
- :
- 00Hour
- :
- 00Minute
- :
- 00Seconds
The following describes Javascript.
First, set an end time, which is created by using new Date () to calculate the countdown time.
// End Time var t_endtime = new Date ("00:00:00 ");
Then there is the conversion rule. It is common sense to convert rules.
// Time conversion rule var t_day = 60*60*24; var t_hour = 60*60; var t_min = 60;
The second is to use setInterval to calculate the comparison of the current time. Because the time is in the past one second, the acquisition of the current time is calculated in setInterval. of course, the calculated results must be displayed on the interface.
Var ele_day = document. getElementById ("day"); var ele_hour = document. getElementById ("hour"); var ele_min = document. getElementById ("min"); var ele_sec = document. getElementById ("sec"); setInterval (function () {// get the current time var t_currenttime = new Date (); // End Time-current time = remaining time var t_result = t_endtime.getTime ()-t_currenttime.getTime (); // convert the remaining time to var t_time = Math. floor (t_result/1000); var t_result_day = Math. floor (t_time/t_day); var t_result_hour = Math. floor (t_time % t_day/t_hour); var t_result_min = Math. floor (t_time % t_day % t_hour/t_min); var t_result_sec = Math. floor (t_time % t_day % t_hour % t_min); // Add 0 before the value if the time is less than 10; if (t_result_day <10) {t_result_day = "0" + t_result_day;} if (t_result_hour <10) {t_result_hour = "0" + t_result_hour;} if (t_result_min <10) {t_result_min = "0" + t_result_min;} if (t_result_sec <10) {t_result_sec = "0" + t_result_sec;} // ele_day.textContent = t_result_day; Day = second; ele_min.textContent = t_result_min; ele_sec.textContent = t_result_sec;}, 1000 );
The countdown function is complete.
The above is all the content of this article, hoping to help you learn.