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>

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

赞 (0)

相关推荐

  • vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)

    我发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个,测试通过,直接上代码 如下是组件代码: <template> <span :endTime="endTime" :callback="callback" :endText="endText"> <slot> {{content}} </slot> </span> </template> <sc

  • Vue 中获取当前时间并实时刷新的实现代码

    1. 实现代码 <template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div> </template> <script> export default { data(){ return { nowDate: "", // 当前日期 nowTime: "", // 当前时间 nowWeek: "" // 当前星期 } }, methods

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

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

    本文实例为大家分享了vue实现右上角时间显示实时刷新的具体代码,供大家参考,具体内容如下 效果图 utils文件夹下的index.js export default { // 获取右上角的时间戳 formatDate(time) { let newTime = ""; let date = new Date(time); let a = new Array("日","一","二","三","四&q

  • Vue+WebSocket页面实时刷新长连接的实现

    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示,记录一下过程以及碰到的问题: 注意:页面刷新长连接会被关闭,其实进入当前页面建立长连接的目的就是页面不用F5刷新,所有数据自动实时刷新,如果还是来回F5大刷页面那就没有意义了... ps: 如果实在有这个需求的话,网上貌似有实现刷新页面长连接不断的方法,请自行百度....

  • 关于JavaScript跨域问题及实时刷新解决方案

    在自己页面显示其他网站上面的数据,需要用Ajax,就涉及到跨域问题, 解决方案:jQuery.support.cors = true; (浏览器支持跨域访问), 实例: 复制代码 代码如下: //浏览器支持跨域访问 jQuery.support.cors = true; $.ajax({ url: "http://www.rj99999.com/Price/ListPrice.html", dataType: 'html', success: function (data, textS

  • 基于Vue实现tab栏切换内容不断实时刷新数据功能

    基于Vue实现tab栏切换内容不断实时刷新数据功能

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好 也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l

  • Vue filter 过滤当前时间 实现实时更新效果

    过滤器 过滤器是处于客户端与服务器资源文件之间的一道过滤网,在访问资源文件之前,通过一系列的过滤器对请求进行修改.判断等,把不符合规则的请求在中途拦截或修改.也可以对响应进行过滤,拦截或修改响应. 下面通过代码给大家介绍Vue filter 过滤当前时间 实现实时更新,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • vue如何动态实时的显示时间浅析

    vue如何动态实时的显示时间浅析

    vue动态实时显示时间有两种方法 1.可以用day.js,处理日期和时间的js库 用法 npm install dayjs --save 引入import dayjs from 'dayjs' 然后创建定时器更新最新的时间 this.timeId = setInterval(()=>{ this.sday =dayjs().format('YYYY-MM-DD HH:mm:ss'); }, 1000); 更多的详情可以查看day.js的api api文档点这里 2.使用vue过滤器filters

  • Python中利用pyqt5制作指针钟表显示实时时间(指针时钟)

    Python中利用pyqt5制作指针钟表显示实时时间(指针时钟)

    文末附完整源代码实现过程... 想实现这样一个功能,然后pyqt5中又没有现成的组件可以使用,于是就想着只能通过绘图的方式来实现.说到绘图的话,turtle框架无疑是最常见的选择,但其实通过pyqt5的QPainter组件也是可以实现的.而且最后呈现出来的效果还是挺漂亮的. 实现思路:通过使用pyqt5的QPainter组件来绘制好时钟的图表,最后通过定时器不断的改变当前当前时间在图表上面的显示位置.这样最终就实现了一个指针时钟在不断的走动的过程. 和前面的UI应用一样,我们用到的UI相关的组件

  • 使用Javascript在HTML中显示实时时间

    本文实例为大家分享了用Javascript在HTML中显示实时时间的具体代码,供大家参考,具体内容如下 方法如下: 1. 在script中建立方法time:2. 创建新的Date对象date,并通过使用Date的内置方法给year.month等赋值:3. 通过连接符号将各个时间连接起来:4. 使用document.getElementById(“time”).innerHTML将其显示到HTML主页中:5. 使用setInterval设置动态更新时间,即实时时间: 注意: (1)获取年份的方法前

  • js获取当前时间显示在页面上并每秒刷新

    方法很简单,代码也很简洁,直接奉上代码吧 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js获取当前时间显示在页面上</title> <script> window.onload=function(){ //定时器每秒调用一次fnDate() setInterval(f

随机推荐