vue 动态显示实时时间

成品图：

简单来说就两步，首先把时间转换成常规时间，再定时器让其动起来

首先data里面定个变量showtime,用timeFormate方法转换当前时间，nowTimes动起来


data() {return {nowTime: "",};},created() {this.showTimes();},methods: {// 显示当前时间timeFormate(timeStamp) {let year = new Date(timeStamp).getFullYear();let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();let week = new Date(timeStamp).getDay();let weeks = ["日", "一", "二", "三", "四", "五", "六"];let getWeek = "星期" + weeks[week];this.nowTime=year +"年" +month +"月" +date +"日" +" " +hh +":" +mm +":" +ss +getWeek;},showTimes() {this.timeFormate(new Date());setInterval(this.showTimes, 1000);this.clear();},clear() {clearInterval(this.showTimes);this.nowTime= null;},},

vue 动态显示实时时间相关推荐

Vue获取当前的实时时间+Vue生成计数器
Vue获取当前的实时时间+Vue生成计数器如何使用vue获取当前的实时时间,可以通过**Date():**函数获取当前的时间,但是只能获取当前这一秒的时间,所以需要给他一个延时,每一秒让他刷新一次, ...
jsp页面动态显示本地时间
jsp页面动态显示本地时间 <script language="javascript"> //检查是不是两位数字,不足补全 function check(str){st ...
【组件封装】显示实时时间和星期几·附文字特效
目录前言 1.显示实时时间无星期版 1.1 效果如下: 1.2 封装的代码如下(适用vue) 2.显示实时时间带星期几 2.1 效果图 2.2 封装的代码如下(适用vue) 3.流光效果 4.文字发 ...
VUE jQuery+VUE带实时节气创意圆形罗盘时钟动画特效
1.外部引用的js文件 ①jquery版本:jquery-3.3.1.js(可以自己找一个jQuery版本,不要太旧就行) <script type="text/javascript& ...
vue怎么截取时间年月_时间格式的转化 vue与js 年月日时分秒
首先使用原生转化的方法第一种 //时间转换 dateStr(d, sign) { //如果没有传递符号,给一个默认的符号 if (!sign) { sign = '-' } //获取d里面年月日时分 ...
vue中解决时间在ios上显示NAN的问题
vue中解决时间在ios上显示NAN的问题参考文章: (1)vue中解决时间在ios上显示NAN的问题 (2)https://www.cnblogs.com/wzs5800/p/9580785.ht ...
pyqt5动态显示当前时间
动态显示当前时间 QTimer QThread from PyQt5.QtWidgets import QWidget, QPushButton, QApplication, QGridLayout, ...
JS实现动态显示当前时间(12/24小时制)(转载Mr.Think)
今天又要用到动态显示当前时间,且要求可以切换24/12小时制, 记得很久前写过一个24小时制的,但一时没能找着, 于是又重新写了个,若有需要的朋友自行复制粘贴一份吧. 很简单的一个功能函数,实现方式不 ...
C# CRC16 在textbox中显示实时时间
PC环境win10,编译器visual studio2015 CRC16的源码 static int crc16(byte[] data, int size) {int crc = 0x0;byte ...
stm32数码管显示实时时间并有闹钟功能
stm32数码管显示实时时间并有闹钟功能功能描述数码管介绍数码管芯片段选与位选驱动数码管显示代码实验思路完整代码 Led.h Led.c Key.h Key.c beep.h beep. ...

vue 动态显示实时时间

vue 动态显示实时时间相关推荐

最新文章

热门文章