cari

Rumah  >  Artikel  >  hujung hadapan web  >  JavaScript分秒倒计时器实现方法

JavaScript分秒倒计时器实现方法

韦小宝
韦小宝asal
2017-11-28 09:52:422922semak imbas

本文实例讲述了js分秒倒计时器实现方法。接触了js才感觉js的功能真的很强大，让我们来看看js实现计时器的方法吧！

一、基本目标

在JavaScript设计一个分秒倒计时器，一旦时间完成使按钮变成不可点击状态

具体效果如下图，为了说明问题，调成每50毫秒也就是每0.05跳一次表，

真正使用的时候，把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000即可。

在时间用完之前，按钮还是可以点击的。

时间用完之后，按钮就不能点击了。

二、制作过程

<!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>

以上就是JavaScript分秒倒计时器实现方法所有内容了，有代码有思路是不是很舒服呢。

相关推荐：

JS局部打印方法

最新的JS面试题解析

html页面用js中实现查找功能

Atas ialah kandungan terperinci JavaScript分秒倒计时器实现方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery动画与特效详解Artikel seterusnya：jQuery实现设置、移除文本框默认值功能

Artikel berkaitan

Lihat lagi