首页 / JAVASCRIPT / 原生js 秒表实现代码

原生js 秒表实现代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了原生js 秒表实现代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2089字，纯文字阅读大概需要3分钟。

内容图文

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秒读取一次当前时间，再用当前时间减去按下时记下的时间，算出经过了的时间。

内容总结

以上是互联网集市为您收集整理的原生js 秒表实现代码全部内容，希望文章能够帮你解决原生js 秒表实现代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/368091.html

来源：【匿名】