美文网首页
js实现从零开始的计时器

js实现从零开始的计时器

作者: 5cc9c8608284 | 来源:发表于2022-05-24 15:29 被阅读0次

今天做一个移动端答卷项目的时候遇到了一个需求,用户进入题目页面从零开始计时,显示的格式为时分秒的形式,如下所示:


计时器.png

我刚开始的思路是在用户进入题目页面时在生命周期函数中拿到初始时间,然后在用户点击下一题的时候拿到结束时间,用结束时间减去开始时间这样就能得到做某个题目的时间,然后把这个时间显示在页面上,很显然这个思路是错的,因为这样做只能拿到做一个题目的时长,并不能动态的显示时间。
方案二:
在生命周期函数中拿到初始时间,然后开启一个定时器,每隔一秒执行一次,在定时器里执行如下代码:

    let b = new Date().getTime();
    setInterval(() => {
      this.time = new Date() - b;
      let a = Math.ceil((new Date() - b) / 1000); //a是秒
      var h = parseInt(a / 3600);//时
      var m = parseInt((a % 3600) / 60);
      var s = (a % 3600) % 60;
      this.time = h + "小时" + m + "分" + s + "秒";
    }, 1000);

每隔一秒用新时间减去初始时间,动态获取所经历的时长,再把这个时长转换成时分秒的形式,这样就实现需求了
将秒转换为时分秒的函数:

   handleTime(ts) {//这里传入的ts单位为秒
            // 获取时分秒
            // 时
            let h = parseInt(ts / 3600);
            //分
            let m = parseInt((ts % 3600) / 60);
            // 秒
            let s = parseInt((ts % 3600) % 60);
            console.log(s, "h");
            this.msg = h + "小时" + m + "分钟" + s + "秒";
          },
        },

相关文章

网友评论

      本文标题:js实现从零开始的计时器

      本文链接:https://www.haomeiwen.com/subject/sxweprtx.html