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 相关文章推荐
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
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实现ODBC数据分页显示一例
2006/10/09 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
asp.net和php的区别点总结
2019/10/10 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
javascript 跳转代码集合
2009/12/03 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
JavaScript闭包详解
2015/02/02 Javascript
javascript常用方法总结
2015/05/14 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
Python import自定义模块方法
2015/02/12 Python
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python实现图片横向和纵向拼接
2020/03/05 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
华为慧通笔试题
2016/04/22 面试题
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
鲜花方阵解说词
2014/02/13 职场文书
父母对孩子的寄语
2014/04/09 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python