在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
本文实例为大家分享了vue实现右上角时间显示实时刷新的具体代码,供大家参考,具体内容如下 效果图 utils文件夹下的index.js export default { // 获取右上角的时间戳 formatDate(time) { let newTime = ""; let date = new Date(time); let a = new Array("日","一","二","三","四","五","六"); let year = date.getFullYear(), month = date.getMonth()+1,//月份是从0开始 day = date.getDate(), hour = date.getHours(), min = date.getMinutes(), sec = date.getSeconds(), week = new Date().getDay(); if(hour<10){ hour = "0"+hour; } if(min<10){ min="0"+min; } if(sec<10){ sec = "0"+sec; } newTime = year + "-"+month+"-" +day +" 星期"+a[week] + " "+hour+":"+min+":"+sec; return newTime; } } src==>page文件夹下cs.vue <template> <div class="main"> <!-- 头部 --> <div class="header"> <div class="cue_time">{{currentDate}}</div> </div> </div> </template> <script> import utils from '../utils/index' export default { name:"tranin", data () { return{ currentDate: utils.formatDate(new Date()), currentDateTimer:null,//头部当前时间 } }, methods:{ // 刷新头部时间 refreashCurrentTime(){ this.currentDate = utils.formatDate(new Date()) } }, mounted(){ // 定时刷新时间 this.currentDateTimer = setInterval(this.refreashCurrentTime,1000) } } </script> 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。 |
请发表评论