原生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 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
npm全局环境变量配置详解
Dec 15 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 mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
详解Python中的变量及其命名和打印
2016/03/11 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
通过python检测字符串的字母
2020/02/18 Python
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
物流仓管员工作职责
2014/01/06 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
网站出售协议书范文
2014/10/10 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
保送生自荐信范文
2015/03/26 职场文书
关于保护环境的建议书
2019/06/24 职场文书
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android