Home > Article > Web Front-end > JavaScript countdown timer implementation method

JavaScript countdown timer implementation method

韦小宝Original: 2017-11-28 09:52:422929browse

The example of this article describes the implementation method of jscountdown timer. After getting in touch with js, I felt that the function of js is really powerful. Let’s take a look at how js implements a timer!

1. Basic goal

Design a minute and second countdown timer in JavaScript. Once the time is completed, The button becomes unclickable.

The specific effect is as shown below. In order to illustrate the problem, it is adjusted to jump the table every 50 milliseconds, that is, every 0.05.

When it is actually used, the window setInterval("clock.move()",50); in .onload=function(){...} can be adjusted from 50 to 1000.

The button can still be clicked before the time runs out.

After the time runs out, the button cannot be clicked.

2. Production process

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>time remaining</title>  
</head>  
<!--html部分很简单，需要被javascript控制的行内文本与提交按钮都被编上ID-->
<body>  
剩余时间：<span id="timer"></span>  
<input id="go" type="submit" value="go" />  
</body>  
</html>  
<script>  
/*主函数要使用的函数，进行声明*/  
var clock=new clock();  
/*指向计时器的指针*/  
var timer;  
window.onload=function(){  
    /*主函数就在每50秒调用1次clock函数中的move方法即可*/  
    timer=setInterval("clock.move()",50);  
    }  
function clock(){  
    /*s是clock()中的变量，非var那种全局变量，代表剩余秒数*/  
    this.s=140;  
    this.move=function(){  
        /*输出前先调用exchange函数进行秒到分秒的转换，因为exchange并非在主函数window.onload使用，因此不需要进行声明*/  
        document.getElementById("timer").innerHTML=exchange(this.s);  
        /*每被调用一次，剩余秒数就自减*/  
        this.s=this.s-1;  
        /*如果时间耗尽，那么，弹窗，使按钮不可用，停止不停调用clock函数中的move()*/  
        if(this.s<0){  
            alert("时间到");  
            document.getElementById("go").disabled=true;  
            clearTimeout(timer);  
            }  
        }  
    }  
function exchange(time){  
    /*javascript的除法是浮点除法，必须使用Math.floor取其整数部分*/  
        this.m=Math.floor(time/60);  
        /*存在取余运算*/  
        this.s=(time%60);  
        this.text=this.m+"分"+this.s+"秒";  
        /*传过来的形式参数time不要使用this，而其余在本函数使用的变量则必须使用this*/  
        return this.text;  
}  
</script>

The above is the entire content of JavaScript countdown timer implementation method, with code Isn’t it very comfortable to have ideas?

Related recommendations:

JS partial printing method

The latest JS interview question analysis

html page uses js to implement the search function

The above is the detailed content of JavaScript countdown timer implementation method. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of jQuery animation and special effectsNext article：Detailed explanation of jQuery animation and special effects

See more

JavaScript countdown timer implementation method

Related articles