前端html、css、jq制作精准计时器（几乎零误差）

最新推荐文章于 2023-10-30 09:51:21 发布

原创最新推荐文章于 2023-10-30 09:51:21 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css3 #html5 #html #javascript

前端同时被 3 个专栏收录

30 篇文章

订阅专栏

思考

10 篇文章

订阅专栏

Jquery

4 篇文章

订阅专栏

本文介绍了一种利用JavaScript实现的高精度计时器，通过精确处理毫秒级误差，确保计时准确性。采用系统时间差值计算，结合setTimeout定时器，有效避免了单线程执行中的时间偏差。

先来看下效果

gif动图是最终的效果

制作源泉（或遇到的苦恼）

一般的计时器，一般的思路，要做成上图的效果，首先会想到的是通过setTimeout一毫秒一毫秒的计数去实现，但是每当setTimout执行该函数的时候，中间消耗了其他资源时间（因为js是单线程的），从而产生误差,使得计时器计时不准确，计时时间越长越能表现出来。

核心思想（或解决办法）

每当计时器开始，截取此刻的时间startTime（系统时间），然后使用计时器setTimeout不断获取系统的时间减取startTime，通过求余来计算毫秒时间（打印出来的结果肯定不是一毫秒一毫秒计算，会把时间误差计算进去，从而使得计时器更加准确，有兴趣的可以打开控制台看看看打印的数据）

上代码：
【start.js】

var imgPath = "images/";
$(function(){
    //rem单位计算
	var deviceWidth = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
    
    //给所有页面的img图片加上path路径
	$("img").each(function(){
		imgName = this.name;
		this.src = imgPath+imgName;
	})
})

var n=0; //计算毫秒
var s=0;  //计算秒
var timer=null;
var is_onstart=false; //是否点击开始
var is_onstop=false;  //是否点击暂停
var count=0;  //点击开始次数
var sstart=0;   //记录暂停时的次数
//开始计时
function play() {
    var interval=1; // 执行方法等待的时间
    var start=Date.now(); // 记录开始的某一刻时间
    count++;
    is_onstart=true;
    if(is_onstart  && (count==1)){
        timer=setTimeout(step,interval);
        function step(){
            var msecond = (Date.now()-start)+sstart; // 毫秒误差处理
            s= parseInt(msecond/1000);
            $('#second').text(s);
            n= msecond%1000;
            console.log(n)
            var nStr = n
            // 补零
            if(n<10){
                nStr="00"+n;
            }
            if(n<100 && n>10 || n==10){
                nStr="0"+n;
            }
            $('#millisecond').text(nStr);
            if(is_onstart){ // 计时
                setTimeout(step,interval);
            }
            else{ // 停止计时
                sstart=msecond;
                clearTimeout(timer);
            }
        }
    }
};
// 暂停计时器
function pause(){
    is_onstart=false;
    is_onstop=true;
    count=0;
}
// 重置计时器
function setup() {
    clearTimeout(timer);
    is_onstart=false;
    count=0;
    n=0;
    s=0;
    m=0;
    sstart=0;
    $('#second').text("0");
    $('#millisecond').text("000");
}

【start.html】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精准计时器</title>
    <link rel="stylesheet" href="css/start.css">
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script src="js/start.js"></script>
</head>
<body class="bg">
    <div class="flex flex_center flex_middle">
        <div>计时器：</div>
        <img name="clock.png" class="clock">
        <div class="timer"><div id="second">0</div>"<div id="millisecond">000</div></div>
        <button onclick="play()">开始</button>
        <button onclick="pause()">暂停</button>
        <button onclick="setup()">重置</button>
    </div>
</body>
</html>

【start.css】

*{
    margin: 0;
    padding: 0;
}
body{
    font-size: .27rem; /*body必须有一个默认大小*/
    background: rgb(61, 122, 221);
}
.bg{
    padding-top: 10vh;
    box-sizing: border-box;
}
.bg>div{
    margin-bottom: .5rem;
    color: #fff;
}
.bg>div>button{
    margin-left: .02rem;
}
/*弹性盒子*/
.flex{
    display: flex;
    display: -webkit-flex;
}
.flex_item{
    flex: 1;
    -webkit-flex: 1;
    -moz-flex:1;
}
.flex_center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.flex_middle {
    justify-content: center;
    -webkit-justify-content: center;
}
.flex_around{
    justify-content: space-around;
    -webkit-justify-content: space-around;
}
.flex_between{
    justify-content: space-between;
    -webkit-justify-content: space-between;
}
.flex_column{
    flex-direction: column;
    -webkit-flex-direction: column;
}
/* 时间 */
.clock{
    width: .42rem;
    height: .42rem;
}
.timer{
    background: #255293;
    color: #fff;
    font-weight: bold;
    border-radius: 15px;
    width: 1.4rem;
    text-align: center;
}
.timer div{
    display: inline-block;
}
.timer>div:nth-child(1){
    text-align: right;
}
.timer>div:nth-child(2){
    text-align: left;
}