原生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 相关文章推荐
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
js表单登陆验证示例
Oct 19 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
Nuxt.js实战详解
Jan 18 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 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
解析smarty模板中类似for的功能实现
2013/06/18 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
详谈PHP编码转换问题
2015/07/28 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
JS location几个方法小姐
2008/07/09 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
Window环境下Scrapy开发环境搭建
2018/11/18 Python
详解Python_shutil模块
2019/03/15 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python 求数组局部最大值的实例
2019/11/26 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
性能服装:HYLETE
2018/08/14 全球购物
.net工程师笔试题
2012/06/09 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
货车司机岗位职责
2014/03/18 职场文书
室内趣味活动方案
2014/08/24 职场文书
环境保护建议书
2014/08/26 职场文书
统计员岗位职责范本
2015/04/14 职场文书
民事诉讼代理词
2015/05/25 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书