定时器之计时（时间的转换）

最新推荐文章于 2023-07-14 07:02:02 发布

bling flower

最新推荐文章于 2023-07-14 07:02:02 发布

阅读量765

点赞数 1

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

版权

###示例：
1.需求描述：
当点击开始按钮时开始计时，点击结束时停止计时。并将最后的时间转化为相应的00:00:00的格式
方案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:{
            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)
                }
            },
            handle(){
                if (!this.timer) {
                    this.timer = setInterval(()=>{
                    this.callTime = this.secondToTimeStr(++this.currentTime)
                    }, 1000)
                }
            },
            ending(){
                this.timer && clearInterval(this.timer)
            }
        }
    })
</script>
</html>

在这里插入代码片

bling flower

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
定时器之计时（时间的转换）

###示例：1.需求描述：当点击开始按钮时开始计时，点击结束时停止计时。并将最后的时间转化为相应的00:00:00的格式方案1：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
复制链接

扫一扫