首页 / JAVASCRIPT / 原生js秒表实现代码_时间日期

原生js秒表实现代码_时间日期

内容导读

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

内容图文

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/315137.html

来源：【匿名】