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

{{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);},}

大功告成~~

作者：微微一笑绝绝子

出处：/wwyxjjz/p/15753364.html

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