Implement the countdown Function Based on Javascript and the javascript countdown Function

Source: Internet
Author: User

Implement the countdown Function Based on Javascript and the javascript countdown Function

This article provides an example of the 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

<! DOCTYPE html> 

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.

Articles you may be interested in:
  • Javascript countdown code
  • Js countdown Applet
  • Js countdown jump example after several seconds
  • Code 3 for implementing the countdown to web pages and website running time in js
  • Js implements the countdown function after the verification code is sent
  • Javascript page countdown instance
  • JS implementation adjustable countdown time code sharing
  • JS automatic countdown 30 seconds before the button is available (two scenarios)
  • Countdown to product seckilling using Javascript (Time Synchronization with server time)
  • Complete code for dynamic display of Countdown results implemented by pure jsp

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.