原生js 秒表实现代码


Posted in Javascript onJuly 24, 2012

html代码:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<meta charset="gb2312"> 
<head> 
<style type="text/css"> 
#container { 
margin:0 auto; 
margin-top:10%; 
width:200px; 
} 
#timer { 
border:red double 1px; 
width:180px; 
height:76px; 
line-height:76px; 
font-size:32pt; 
color:green; 
} 
input { 
width:87px; 
} 
</style> 
</head> 
<body onload="init()"> 
<div id="container"> 
<div id="timer"></div> 
<input type="button" id="ctrl" /> 
<input type="reset" onclick="init()" /> 
</div> 
</body> 
</html>

js代码:
/* 
*@author:hyjiacan 
*date:15:57 2010-9-5 
*name:timer 
*/ 
var ctrl = document.getElementById("ctrl"); //控制按钮对象 
var timer = document.getElementById("timer"); //时间显示对象 
var hour, minute, second; //时,分 ,钞 
var t; //setTimeout方法 
//初始化显示和按钮 
var init = function(){ 
timer.innerHTML = "00:00:00"; //由于FF不支持使用innerText,故采用innerHTML 
hour = minute = second = 0; //初始化显示 
ctrl.setAttribute("value", "开始"); //初始化控制按钮文字 
ctrl.setAttribute("onclick", "startit()"); //初始化控制按钮事件 
clearTimeout(t); 
} 
//开始计时 
function startit(){ 
t = setTimeout("startit()", 1000); //每隔1秒(1000毫秒)递归调用一次 
second++; 
if(second>=60){ //判断秒是否到60, 是则进位 
second = 0; 
minute++; 
} 
if(minute>=60){ //判断分是否到60, 是则进位 
minute = 0; 
hour++; 
} 
timer.innerHTML = j(hour) + ":" + j(minute) + ":" + j(second) ; //更新显示 
//更改按钮状态 
ctrl.setAttribute("value", "暂停/停止"); //更改按钮文字 
ctrl.setAttribute("onclick", "pause()"); //更改按钮触发事件 
} 
//显示数字填补,即当显示的值为0-9时,在前面填补0;如:1:0:4, 则填补成为 01:00:04 
var j = function(arg){ 
return arg>=10 ? arg : "0" + arg; 
} 
//暂停计时 
var pause = function(){ 
clearTimeout(t); 
ctrl.setAttribute("onclick", "startit()"); 
ctrl.setAttribute("value", "继续"); 
}

使用setTimeout递归处理。 在这之中,有一个很重要的问题——延迟,这样的做法和系统CPU资源有很大关系,而且函数的调用也要耗费时间,最终就导致计数的误差越来越大。

还有另一个方法:

在按下开始按钮的时候,记录下按下的时间(毫秒),然后每隔1秒读取一次当前时间,再用当前时间减去按下时记下的时间,算出经过了的时间。

Javascript 相关文章推荐
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
javascript设计模式 接口介绍
Jul 24 #Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 #Javascript
js+xml生成级联下拉框代码
Jul 24 #Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 #Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 #Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 #Javascript
基于jquery自定义图片热区效果
Jul 21 #Javascript
You might like
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
关于php循环跳出的问题
2013/07/01 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
php获取微信openid方法总结
2019/10/10 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
python threading模块操作多线程介绍
2015/04/08 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
python版学生管理系统
2018/01/10 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
毕业生如何写自我鉴定
2014/03/15 职场文书
资产运营委托书范本
2014/10/16 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
如何Tomcat中使用ipv6地址
2022/05/06 Servers