原生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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
jquery操作select大全
Apr 25 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
js性能优化技巧
Nov 29 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
node网页分段渲染详解
Sep 05 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 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检测一个数组有没有定义的方法步骤
2019/07/20 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
python中的yield使用方法
2014/02/11 Python
Python中的Numpy入门教程
2014/04/26 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
企业治理工作自我评价
2013/09/26 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
夜不归宿检讨书
2014/02/25 职场文书
保险公司晨会主持词
2014/03/22 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
小学远程教育工作总结
2015/08/13 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
微信小程序实现轮播图指示器
2022/06/25 Javascript
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers