想要的效果:(时间动态显示)

1.在data中定义一个变量,存储时间

2.创建一个文件放入封装好的js

--主要是使用定时器,每秒调用,最后清除定时器

export function formatDate(date) {// 格式化时间为 YYYY-MM-DD HH:MM:SSvar year = date.getFullYear();var month = date.getMonth() + 1;var day = date.getDate();var hours = date.getHours();var minutes = date.getMinutes();var seconds = date.getSeconds(); // 判断是不是小于10 返回01 02 03function check(num) {if (num < 10) {// 如果数字小于10,前边拼接个0return "0" + num;} else {return num;}}let timeArry = {};let timeText = `${check(year)}年${check(month)}月${check(day)}日  ${check(hours)}: ${check(minutes)}: ${check(seconds)}`;let nowDay = date.getDay();let weeks = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");let week = weeks[nowDay]; // let state = ``; // // 判断当前时间段 // if (hours >= 0 && hours <= 10) { //   state = `早上`; // } else if (hours > 10 && hours <= 14) { //   state = `中午`; // } else if (hours > 14 && hours <= 18) { //   state = `下午`; // } else if (hours > 18 && hours <= 24) { //   state = `晚上`; // }timeArry.timeText = timeText;timeArry.week = week; // timeArry.state = state;return timeArry; // 时间展示 // return ` //         ${check(year)}年 //         ${check(month)}月 //         ${check(day)}日 //         ${check(hours)} : //         ${check(minutes)} : //         ${check(seconds)}`;}

3.引入封装好的js

import { formatDate } from "@/utils/index";
export default {data() {return {nowDate: "",timeArry: ""};},mounted() {},created() {this.timeArry = formatDate(new Date());this.timeStart();},methods: {timeStart() {// 设置定时器this.timer = setInterval(() => {this.timeArry = formatDate(new Date());}, 1000);}}
};

4.定义一个div

{{timeArry.timeText}}

方法二:(vue.js)

效果如下:

new Date().getTime()     获取时间戳

核心代码如下:

 <!-- date --><div class="timeBox padding-xl"><p class="text-24 text-white" v-html="formateTimeStamp(date)"></p></div>

 
data: function () {return {date: new Date().getTime()}},mounted: function () {},created: function () {this.loadTime()},methods: {loadTime() {var _this = this;setInterval(() => {_this.date += 1000;}, 1000);// this.$api.serveTime({}).then(res => {//   console.log("服务器时间", res);//   var _this = this;//   _this.servertime = res;//   setInterval(() => {//     _this.date += 1000;//     console.log(_this.date, '**');//   }, 1000);// });},// 转换时间戳formateTimeStamp(time) {var date = new Date(time);var year = date.getFullYear();var month =date.getMonth() + 1 < 10? "0" + (date.getMonth() + 1): date.getMonth() + 1;var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();var minute =date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();var second =date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();var week = ["日", "一", "二", "三", "四", "五", "六"][date.getDay()];// return year + "年" + month + "月" + day + "日" + hour + ":" + minute + ":" + second;return ('<span style="font-size: 66px; text-shadow: 0px 2px 7px rgba(51, 51, 51, 0.6);">' +hour +":" +minute + ":" + second +"</span><br/>" +year +"年" +month +"月" +day +"日" +"&nbsp;&nbsp;&nbsp;星期" +week);},
}

大功告成~~

作者:微微一笑绝绝子

出处:https://www.cnblogs.com/wwyxjjz/p/15753364.html

本博客文章均为作者原创,转载请注明作者和原文链接。

Vue项目 设置实时时间(年月日 时分秒)两种方法相关推荐

  1. HTML获取当前时间年月日时分秒等相关信息

    HTML获取当前时间年月日时分秒等相关信息 [方式一]获取整段时间 <!DOCTYPE html> <html lang="en"> <head> ...

  2. java去掉date分时秒_java Date获取年月日时分秒的实现方法

    java date获取年月日时分秒的实现方法 package com.util; import java.text.dateformat; import java.util.calendar; imp ...

  3. 计算机音乐播放器设置,Win7系统下设置默认音乐播放器的两种方法

    可能很多新手用户不知道Win7系统下怎么设置默认音乐播放器?我们习惯将某一程序设置为默认打开方式,音乐播放器也可以这样子的.一些用户想把酷狗播放器.或者qq音乐设置为默认音乐播放器,只要打开音乐文件, ...

  4. html mp3默认播放器,Win7系统下设置默认音乐播放器的两种方法

    可能很多新手用户不知道Win7系统下怎么设置默认音乐播放器?我们习惯将某一程序设置为默认打开方式,音乐播放器也可以这样子的.一些用户想把酷狗播放器.或者qq音乐设置为默认音乐播放器,只要打开音乐文件, ...

  5. oracle 当前时间年月日时分秒,oracle存储精确时间 年月日 时分秒

    我用的是ibatis框架 为了做一个聊天功能,发现不能显示最新的消息,一看,原来oracle中存入的时间不对 oracle中要存入 年月日 时分秒首先要把 oracle中这列设置为 timestamp ...

  6. 获取当前时间---年月日时分秒------iOS

    方式一:XXXX年-XX月-XX日  XX时:XX分:XX秒的格式 - (IBAction)LoginAction:(UIButton *)sender { NSDate *date = [NSDat ...

  7. 设置Excel表格“只读模式”的两种方法

    Excel表格的"只读模式"可以帮助我们防止意外更改表格,根据不同需求,表格可以设置"有密码"和"无密码"的两种"只读模式&quo ...

  8. docx行间距怎么设置_word怎么调整行间距的两种方法

    我们在使用word时,由于各种原因我们需要设置行间距,可是word行间距怎么调?word行距怎么设置呢?那么下面就由学习啦小编给大家分享下word调整行间距的技巧,希望能帮助到您. word调整行间距 ...

  9. 实现JAVA时间加减的两种方法

    JAVA的时间加减 1.获取当前系统时间 Date date = new Date(); 2.实现时间的加减的两种方法 第一种: 用java.text.SimpleDateFormat来实现 Simp ...

  10. Vue项目中前端请求后端数据的两种方式

    1.JS方式,使用fetch函数,较底层 //JS方式请求分页数据 fetch("http://localhost:9090/user/page?pageNum=" +this.p ...

最新文章

  1. Jquery中使用select2插件实现ajax实时请求数据
  2. java在主程序修改函数输出,Java通过JNI调用CUDA
  3. Ehab and Prefix MEXs CodeForces - 1364C(思维)
  4. 开源基于Canal的开源增量数据订阅消费中间件
  5. mybatis学习(3):映射文件的配置和接口创建
  6. 可以发外链的网站_可以发外链的地方有哪些?-top推
  7. 如何从应用直接跳转AppStore 电话 短信 邮件
  8. 计算机网络自顶向下方法第6章-链路层和局域网.1
  9. AdBlock插件离线安装
  10. dirent struct_关于readdir返回值中struct dirent.d_type的取值有关问题(转)
  11. 做了三年开发后,我选择回家创业
  12. 第8章 卷积神经网络
  13. JVM 性能调整的一些基本概念
  14. git提交,安装配置 commitizen cz-conventional-emoji $git cz代替$git commit
  15. Spark性能优化之-开发调优
  16. 我所知道查找算法之斐波拉契(黄金分割法)查找
  17. python库吐血整理
  18. python 百度云搜索引擎入口_2016最新百度云网盘搜索引擎源码,附带Python爬虫+PHP网站+Xunsearch搜索引擎...
  19. 告别黑暗 电脑黑屏故障排除实例一则
  20. 计算机中日期连接符号,电脑时间不能同步,在命令提示符里输入w32tm

热门文章

  1. sampro效果_SAM机架设置音乐/话筒/麦克风/输入和效果输出/添加VST插件/详细教程(附:SAM机架VST插件效果包下载)...
  2. 简单的木马制作并且运用
  3. 服务器上不存在该种子文件,风行为什么点击种子链接总会弹出“找不到文件关联或无效的菜单句柄”...
  4. 渗透测试学习笔记(提权)
  5. Print Conductor批量打印工具,Print Conductor|Crack版
  6. 在linux下安装TPLINK无线网卡驱动
  7. 无人驾驶之硬件平台详解
  8. drawRGB在N7370上的问题
  9. 泰坦尼克数据集kaggle Titanic下载
  10. ObjectiveC开发教程--如何判断字符串是否为空的方法