How to Implement the JavaScript minute-second countdown timer _ javascript tips-js tutorial

Source: Internet
Author: User
This article mainly introduces the implementation of the JavaScript minute-second countdown method, which can implement the countdown effect by millisecond, and has some reference value, for more information about how to implement the JavaScript minute-second countdown timer, see the example in this article. Share it with you for your reference. The specific analysis is as follows:

I. Basic Objectives

Design a minute-second countdown timer in JavaScript. Once the time is complete, the button becomes unclickable.

The specific effect is shown in. To illustrate the problem, it is adjusted to 50 milliseconds, that is, the table jumps every 0.05,

In actual use, set setInterval ("clock. move ()", 50) in window. onload = function () {...} to 1000.

Before the time is used up, you can click the button.

After the time is used up, the button cannot be clicked.

Ii. Production Process

The Code is as follows:





Time remaining



Remaining Time:



Script
/* Declare the function to be used by the main function */
Var clock = new clock ();
/* Pointer to the timer */
Var timer;
Window. onload = function (){
/* The main function calls the move method in the clock function once every 50 seconds */
Timer = setInterval ("clock. move ()", 50 );
}
Function clock (){
/* S is the variable in clock (), which is a non-var global variable and represents the remaining number of seconds */
This. s = 140;
This. move = function (){
/* Call the exchange function for second-to-second conversion before output, because exchange is not used in the main function window. onload, so no declaration is required */
Document. getElementById ("timer"). innerHTML = exchange (this. s );
/* Each time a call is called, the remaining seconds are automatically subtracted */
This. s = this. s-1;
/* If the time is exhausted, a window pops up to make the button unavailable and stop calling move () in the clock function ()*/
If (this. s <0 ){
Alert ("time ");
Document. getElementById ("go"). disabled = true;
ClearTimeout (timer );
}
}
}
Function exchange (time ){
/* The javascript division is a floating-point division. You must use Math. floor to obtain its integer part */
This. m = Math. floor (time/60 );
/* Existence of the remainder operation */
This. s = (time % 60 );
This. text = this. m + "Minute" + this. s + "second ";
/* Do not use this as the passed form parameter time, while the other variables used in this function must use this */
Return this. text;
}
Script

I hope this article will help you design javascript programs.

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.