原生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 相关文章推荐
ExtJs使用总结(非常详细)
Mar 22 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
javascript基础知识讲解
Jan 11 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
js数据类型检测总结
Aug 05 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
vue实现拖拽效果
Dec 23 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下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
PHP常用处理静态操作类
2015/04/03 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
jquery延迟加载外部js实现代码
2013/01/11 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
详解python单例模式与metaclass
2016/01/15 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
python 日期操作类代码
2018/05/05 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
Python list与NumPy array 区分详解
2019/11/06 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
Python 实现简单的客户端认证
2020/07/29 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
教育课题研究自我鉴定范文
2013/12/28 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
文明市民先进事迹
2014/05/15 职场文书
论文诚信承诺书
2014/05/23 职场文书
党员个人总结自评
2015/02/14 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书