原生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
Feb 25 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
Ionic快速安装教程
Jun 03 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
微信小程序实现多图上传
Jun 19 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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 批量生成html,txt文件的实现代码
2013/06/26 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
IE下js调试工具Companion.JS
2010/10/15 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
Javascript var变量删除原理及实现
2020/08/26 Javascript
Python使用django获取用户IP地址的方法
2015/05/11 Python
Python实现控制台输入密码的方法
2015/05/29 Python
深入理解python对json的操作总结
2017/01/05 Python
Python中import机制详解
2017/11/14 Python
python 不以科学计数法输出的方法
2018/07/16 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
django解决跨域请求的问题
2018/11/11 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Python 获取div标签中的文字实例
2018/12/20 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
酒店经理职责
2014/01/30 职场文书
导师就业推荐信范文
2014/05/22 职场文书
廉洁自律证明
2015/06/24 职场文书
Python加密与解密模块hashlib与hmac
2022/06/05 Python