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创建自己的插件(自定义插件)的方法
Jun 10 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 Javascript
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操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
利用python实现数据分析
2017/01/11 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
Python-for循环的内部机制
2020/06/12 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
接口中的方法可以是abstract的吗
2015/07/23 面试题
大学生的网上创业计划书
2013/12/31 职场文书
中学生班主任评语
2014/01/30 职场文书
美化环境标语
2014/06/20 职场文书
演讲稿开场白台词
2014/08/25 职场文书
学生自我评语
2015/01/04 职场文书
新生开学寄语大全
2015/05/28 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python