实时显示时间

简介: 实时显示时间

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


解决隔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>
相关文章
|
6月前
|
JavaScript
实时显示当前时间,每秒更新
实时显示当前时间,每秒更新
|
5月前
|
Android开发
aTimeLogger--时间追踪工具
aTimeLogger--时间追踪工具
|
6月前
2391. 收集垃圾的最少总时间
【5月更文挑战第6天】 收集垃圾的最少总时间
47 4
|
存储 缓存 Dart
如何处理直播实时在线人数显示并且最小化性能和资源消耗?
直播技术成为一种极为流行的交流方式。而直播平台的核心指标之一就是实时在线人数,准确地显示该指标对于用户和运营商来说都具有重要意义。然而,直播实时在线人数的显示也面临着性能和资源消耗的挑战。本文将介绍如何利用Flutter和Dart开发技术栈来优化直播实时在线人数的显示,以达到最小化性能和资源消耗的目标。 作者:狗头大军之江苏分军 链接:https://juejin.cn/spost/7255473856234913852 来源:稀土掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
如何处理直播实时在线人数显示并且最小化性能和资源消耗?
uniapp写一个随时间变化的预约日期列表
const today = new Date(); const dateArray = []; const dayOfWeekArray = []; const yearMonthDayArray = [];
91 0
实时显示日期、时间、城市天气(HTML+JS)
实时显示日期、时间、城市天气(HTML+JS)
1006 0
实时显示日期、时间、城市天气(HTML+JS)
|
定位技术 C#
C#编程练习(03):北斗时间系统、GPS时间系统及其与UTC时间系统之间的转换
C#编程练习(03):北斗时间系统、GPS时间系统及其与UTC时间系统之间的转换
C#编程练习(03):北斗时间系统、GPS时间系统及其与UTC时间系统之间的转换
|
小程序 数据库
小程序评论怎么实时显示数据
小程序评论怎么实时显示数据
347 0
小程序评论怎么实时显示数据