定时器之时间的转换

最新推荐文章于 2022-04-14 23:09:08 发布

bling flower

最新推荐文章于 2022-04-14 23:09:08 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/C05230/article/details/112553176

博客介绍了一个计时功能的需求，即点击开始计时，点击结束停止计时。同时给出两种代码实现方案，方案1按时间由大到小计时（时分秒），方案2按时间由小到大计时（秒分时）。

###示例：
1.需求描述：
点击开始时，计时开始，点击结束，计时停止
2.代码实现：
方案1：
按时间由大到小计时，即时分秒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <span>{{callTime}}</span>
        <button @click="handle">开始</button>
        <button @click="ending">结束</button>
    </div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data(){
            return {
                callTime:"00:00:00",
                timer:null,//定时器
                currentTime:0,//初始时间0
            }
        },
        methods:{
            
            sec_to_time (s) {
              let t;
              if(s > -1){
                  const hour = Math.floor(s/3600);
                  const min = Math.floor(s/60) % 60;
                  const sec = s % 60;
                  if(hour < 10) {
                      t = '0'+ hour + ":";
                  } else {
                      t = hour + ":";
                  }
                  if(min < 10){t += "0";}
                  t += min + ":";
                  if(sec < 10){t += "0";}
                  t += sec.toFixed(0);
              }
              return t;
            },
            handle(){
                if (!this.timer) {
                    this.timer = setInterval(()=>{
                    this.callTime = this.sec_to_time(++this.currentTime)
                    }, 1000)
                }
            },
            ending(){
                this.timer && clearInterval(this.timer)
            }
        }
    })
</script>
</html>

方案2：
按时间由小到大计时，即秒分时

secondToTimeStr (t) {
   t = Number(t)
     var a, i, e, time;
     if (!t) return
     if (t < 60) return '00:00:' + ((i = t) < 10 ? '0' + i : i)
     if (t < 3600) return '00:' + ((a = parseInt(t / 60)) < 10 ? '0' + a : a) + ':' + ((i = t % 60) < 10 ? '0' + i : i)
     if (t >= 3600) {
         // var a, i, e = parseInt(t / 3600)
         return ((e = parseInt(t / 3600)) < 10 ? '0' + e : e) + ':' + ((a = parseInt(t % 3600 / 60)) < 10 ? '0' + a : a) + ':' + ((i = t % 60) < 10 ? '0' + i : i)
     }
 },

if (!this.timer) {
  this.timer = setInterval(()=>{
    this.callTime = this.secondToTimeStr(++this.currentTime)
    }, 1000)
}