JavaScript分秒倒计时器实现方法


Posted in Javascript onFebruary 02, 2015

本文实例讲述了JavaScript分秒倒计时器实现方法。分享给大家供大家参考。具体分析如下:

一、基本目标

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

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

JavaScript分秒倒计时器实现方法

真正使用的时候,把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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
深入理解javascript变量声明
Nov 20 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
小程序实现列表展开收起效果
Jul 29 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
Javascript数组及类数组相关原理详解
Oct 29 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 #Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 #Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 #Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 #Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 #Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 #Javascript
JQuery动画与特效实例分析
Feb 02 #Javascript
You might like
php中http与https跨域共享session的解决方法
2014/12/20 PHP
利用php输出不同的心形图案
2016/04/22 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
超级退弹代码
2008/07/07 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python中使用HTMLParser解析html实例
2015/02/08 Python
python中反射用法实例
2015/03/27 Python
Python实现视频下载功能
2017/03/14 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
导游词之无锡梅园
2019/11/28 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
选购到合适的激光打印机
2022/04/21 数码科技
Java数据结构之堆(优先队列)
2022/05/20 Java/Android
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技