JavaScript分秒倒计时器实现方法
更新时间：2015年02月02日 11:11:54 作者：yongh701
这篇文章主要介绍了JavaScript分秒倒计时器实现方法,可实现按照毫秒倒计时的效果,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JavaScript分秒倒计时器实现方法。分享给大家供大家参考。具体分析如下：
一、基本目标
在JavaScript设计一个分秒倒计时器，一旦时间完成使按钮变成不可点击状态
具体效果如下图，为了说明问题，调成每50毫秒也就是每0.05跳一次表，
真正使用的时候，把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000即可。
在时间用完之前，按钮还是可以点击的。
时间用完之后，按钮就不能点击了。
二、制作过程
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<html xmlns="http://www.w3.org/1999/xhtml">
<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程序设计有所帮助。
相关文章
10个必备的JavaScript async/await工具函数分享
当谈到异步编程时,async/await是JavaScript中常用的功能之一,本文为大家整理了10个常用的await和async函数示例,感兴趣的小伙伴可以参考一下2023-12-12
JS中for,for...in,for...of和forEach的区别和用法实例
JS遍历数组（循环数组）的方式有多种,可以使用传统的for循环,也可以使用升级版的for in循环,还可以使用Array类型的forEach() 方法,这篇文章主要给大家介绍了关于JS中for、for...in、for...of和forEach的区别和用法的相关资料,需要的朋友可以参考下2021-11-11
JS是通过事件队列(Event Loop)的方式来实现异步回调的，但对很多初学JS的人来说，根本搞不清楚单线程的JS为什么拥有异步的能力，所以本文将从进程、线程的角度来解释这个问题2023-05-05
本文主要介绍了JS模拟百度搜索框和选项卡的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-03-03
本文详细介绍javascript哈希表的实例分析及用法。下面就跟小编一起来学习下吧2016-11-11
本篇内容主要给大家通过实例讲述了JavaScript读取和写入cookie的相关知识点，有这方面需要的朋友参考下吧。2018-01-01
这篇文章主要介绍了javascript多物体运动实现方法,结合实例形式分析了JavaScript多物体运动的相关注意事项与具体实现代码,包含四个div块的横向、竖向移动,颜色与边框渐变效果,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了taro 实现购物车逻辑，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了基于Three.js插件制作的360度全景图,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-11-11
在网页中实时的显示时间，不但可以给网页添色，还可以方便浏览者掌握当前时间，为了提高网站的开发速度，可以把主代码封装在一个单独的函数里面，在需要的时候直接调用 而我为了演示，直接写在了主页面，方便大家观看2013-06-06
最新评论