实时显示时间

简介: 实时显示时间

让页面一开始就加载就显示时间。


解决隔1s后才显示时间这个问题


clearTime的值 不等于空时,说明已经开启定时器了哈。


<div id="app">
    {{Showtime}}
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            Showtime:"",
            clearTime:null, 
        },
        created() {
            // 让页面一开始就加载就显示时间。
            //解决隔1s后才显示时间这个问题
            let newtime = new Date();
            let myHover = newtime.getHours();
            let myMin = newtime.getMinutes();
            this.Showtime = myHover + ":" + myMin;
            // 让后每隔1s跟新时间
            this.runTime();
        },
        methods: {
            runTime() {
                this.clearTime = setInterval(() => {
                    let newtime = new Date();
                    let myHover = newtime.getHours();
                    let myMin = newtime.getMinutes();
                    this.Showtime = myHover + ":" + myMin;
                }, 1000)
            }
        },
        //离开页面清除定时器
        beforeDestroy(){
           clearInterval( this.clearTime);
           console.log("---")
        }  
    })
</script>
相关文章
|
7月前
|
JavaScript
实时显示当前时间,每秒更新
实时显示当前时间,每秒更新
107 0
|
7月前
2391. 收集垃圾的最少总时间
【5月更文挑战第6天】 收集垃圾的最少总时间
50 4
如何检查视频画面延迟的时间
做视频通讯的朋友,画面延迟,就是要经常测试的事情。那么怎样测试延迟呢?
479 0
实时显示日期、时间、城市天气(HTML+JS)
实时显示日期、时间、城市天气(HTML+JS)
1053 0
实时显示日期、时间、城市天气(HTML+JS)
|
前端开发 JavaScript NoSQL
[前端]每间隔一段时间查询接口获取到百分比,在页面上按照百分比展示进度条,百分比进度后下载文件
[前端]每间隔一段时间查询接口获取到百分比,在页面上按照百分比展示进度条,百分比进度后下载文件
|
JavaScript 前端开发
倒计时跳转和获取实时时间
本文内容如题,自己做的一个demo,倒计时和获取实时时间在许多场景都用的到,所以还算蛮实用的,需要的朋友可以做个参考。 代码解析:html代码 <body onload="startTime()"> <div class="box"> <div class="time">请等待<span id="dd">6</span>秒</div> <!--设置时间长一点,不然一直跳转很烦--> ![](aaa.png) <div class="id-box"> <div id="time"></div>
296 0
倒计时跳转和获取实时时间
|
小程序 数据库
小程序评论怎么实时显示数据
小程序评论怎么实时显示数据
353 0
小程序评论怎么实时显示数据
|
存储 测试技术 开发工具
BSTestRunner增加历史执行记录展示和重试功能
之前对于用例的失败重试,和用例的历史测试记录存储展示做了很多的描述呢,但是都是基于各个项目呢,不方便使用,为了更好的使用,我们对这里进行抽离,抽离出来一个单独的模块,集成到BSTestRunner中,以后我们使用BSTestRunner直接就可以使用里面的失败重试和展示历史记录了。
BSTestRunner增加历史执行记录展示和重试功能

热门文章

最新文章