vue实现右上角时间显示实时刷新

245 阅读 0 评论 162 点赞

我是靠谱客的博主明理路人，最近开发中收集的这篇文章主要介绍vue实现右上角时间显示实时刷新，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持靠谱客。