Vue项目 设置实时时间(年月日 时分秒)两种方法
想要的效果:(时间动态显示)
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
方法二:(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 +"日" +" 星期" +week);},
}
大功告成~~
作者:微微一笑绝绝子
出处:https://www.cnblogs.com/wwyxjjz/p/15753364.html
本博客文章均为作者原创,转载请注明作者和原文链接。
Vue项目 设置实时时间(年月日 时分秒)两种方法相关推荐
- HTML获取当前时间年月日时分秒等相关信息
HTML获取当前时间年月日时分秒等相关信息 [方式一]获取整段时间 <!DOCTYPE html> <html lang="en"> <head> ...
- java去掉date分时秒_java Date获取年月日时分秒的实现方法
java date获取年月日时分秒的实现方法 package com.util; import java.text.dateformat; import java.util.calendar; imp ...
- 计算机音乐播放器设置,Win7系统下设置默认音乐播放器的两种方法
可能很多新手用户不知道Win7系统下怎么设置默认音乐播放器?我们习惯将某一程序设置为默认打开方式,音乐播放器也可以这样子的.一些用户想把酷狗播放器.或者qq音乐设置为默认音乐播放器,只要打开音乐文件, ...
- html mp3默认播放器,Win7系统下设置默认音乐播放器的两种方法
可能很多新手用户不知道Win7系统下怎么设置默认音乐播放器?我们习惯将某一程序设置为默认打开方式,音乐播放器也可以这样子的.一些用户想把酷狗播放器.或者qq音乐设置为默认音乐播放器,只要打开音乐文件, ...
- oracle 当前时间年月日时分秒,oracle存储精确时间 年月日 时分秒
我用的是ibatis框架 为了做一个聊天功能,发现不能显示最新的消息,一看,原来oracle中存入的时间不对 oracle中要存入 年月日 时分秒首先要把 oracle中这列设置为 timestamp ...
- 获取当前时间---年月日时分秒------iOS
方式一:XXXX年-XX月-XX日 XX时:XX分:XX秒的格式 - (IBAction)LoginAction:(UIButton *)sender { NSDate *date = [NSDat ...
- 设置Excel表格“只读模式”的两种方法
Excel表格的"只读模式"可以帮助我们防止意外更改表格,根据不同需求,表格可以设置"有密码"和"无密码"的两种"只读模式&quo ...
- docx行间距怎么设置_word怎么调整行间距的两种方法
我们在使用word时,由于各种原因我们需要设置行间距,可是word行间距怎么调?word行距怎么设置呢?那么下面就由学习啦小编给大家分享下word调整行间距的技巧,希望能帮助到您. word调整行间距 ...
- 实现JAVA时间加减的两种方法
JAVA的时间加减 1.获取当前系统时间 Date date = new Date(); 2.实现时间的加减的两种方法 第一种: 用java.text.SimpleDateFormat来实现 Simp ...
- Vue项目中前端请求后端数据的两种方式
1.JS方式,使用fetch函数,较底层 //JS方式请求分页数据 fetch("http://localhost:9090/user/page?pageNum=" +this.p ...
最新文章
- Jquery中使用select2插件实现ajax实时请求数据
- java在主程序修改函数输出,Java通过JNI调用CUDA
- Ehab and Prefix MEXs CodeForces - 1364C(思维)
- 开源基于Canal的开源增量数据订阅消费中间件
- mybatis学习(3):映射文件的配置和接口创建
- 可以发外链的网站_可以发外链的地方有哪些?-top推
- 如何从应用直接跳转AppStore 电话 短信 邮件
- 计算机网络自顶向下方法第6章-链路层和局域网.1
- AdBlock插件离线安装
- dirent struct_关于readdir返回值中struct dirent.d_type的取值有关问题(转)
- 做了三年开发后,我选择回家创业
- 第8章 卷积神经网络
- JVM 性能调整的一些基本概念
- git提交,安装配置 commitizen cz-conventional-emoji $git cz代替$git commit
- Spark性能优化之-开发调优
- 我所知道查找算法之斐波拉契(黄金分割法)查找
- python库吐血整理
- python 百度云搜索引擎入口_2016最新百度云网盘搜索引擎源码,附带Python爬虫+PHP网站+Xunsearch搜索引擎...
- 告别黑暗 电脑黑屏故障排除实例一则
- 计算机中日期连接符号,电脑时间不能同步,在命令提示符里输入w32tm
热门文章
- sampro效果_SAM机架设置音乐/话筒/麦克风/输入和效果输出/添加VST插件/详细教程(附:SAM机架VST插件效果包下载)...
- 简单的木马制作并且运用
- 服务器上不存在该种子文件,风行为什么点击种子链接总会弹出“找不到文件关联或无效的菜单句柄”...
- 渗透测试学习笔记(提权)
- Print Conductor批量打印工具,Print Conductor|Crack版
- 在linux下安装TPLINK无线网卡驱动
- 无人驾驶之硬件平台详解
- drawRGB在N7370上的问题
- 泰坦尼克数据集kaggle Titanic下载
- ObjectiveC开发教程--如何判断字符串是否为空的方法