实时显示时间

简介: 实时显示时间

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


解决隔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>
相关文章
|
1月前
|
JavaScript
实时显示当前时间,每秒更新
实时显示当前时间,每秒更新
|
14天前
|
Android开发
aTimeLogger--时间追踪工具
aTimeLogger--时间追踪工具
|
1月前
2391. 收集垃圾的最少总时间
【5月更文挑战第6天】 收集垃圾的最少总时间
24 4
|
11月前
|
存储 缓存 Dart
如何处理直播实时在线人数显示并且最小化性能和资源消耗?
直播技术成为一种极为流行的交流方式。而直播平台的核心指标之一就是实时在线人数,准确地显示该指标对于用户和运营商来说都具有重要意义。然而,直播实时在线人数的显示也面临着性能和资源消耗的挑战。本文将介绍如何利用Flutter和Dart开发技术栈来优化直播实时在线人数的显示,以达到最小化性能和资源消耗的目标。 作者:狗头大军之江苏分军 链接:https://juejin.cn/spost/7255473856234913852 来源:稀土掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
如何处理直播实时在线人数显示并且最小化性能和资源消耗?
实时显示日期、时间、城市天气(HTML+JS)
实时显示日期、时间、城市天气(HTML+JS)
845 0
实时显示日期、时间、城市天气(HTML+JS)
如何检查视频画面延迟的时间
做视频通讯的朋友,画面延迟,就是要经常测试的事情。那么怎样测试延迟呢?
400 0
|
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>
235 0
倒计时跳转和获取实时时间
|
小程序 数据库
小程序评论怎么实时显示数据
小程序评论怎么实时显示数据
314 0
小程序评论怎么实时显示数据