Don't tell any lies, don't tell all the truth.
Table of contents
1. Various front-end time transformations
3. Convert to standard date format
(1) Method 1 yyyy MM month dd day hh:mm:ss
(2) Method 2 yyyy-MM-dd hh:mm and yyyy-MM-dd are common
2. Page clock - display time in real time
3. The countdown to the spike time difference
1. Various front-end time transformations
1. ISO time format
new Date();
let date = new Date();
console.log("new Date()", date); //Tue Apr 26 2022 14:03:18 GMT+0800 (中国标准时间)2. Timestamp
new Date().getTime();
Unix timestamp, defined as the total number of seconds from January 01, 1970, 00:00:00 GMT to the present.
let date2 = new Date().getTime();
console.log("new Date().getTime()", date2);
//时间戳1650953148789 getTime()返回数值的单位是毫秒3. Convert to standard date format
Convert ISO or timestamp format to standard format
(1) Method 1 yyyy MM month dd day hh:mm:ss
// 获取当前时间
dateTime(date) {
let data = new Date(date);
let formatDateTime;
let Y = data.getFullYear();
let M = data.getMonth() + 1;
let D = data.getDate();
let H = data.getHours();
let Min = data.getMinutes();
let S = data.getSeconds();
let W = data.getDay();
H = H < 10 ? "0" + H : H;
Min = Min < 10 ? "0" + Min : Min;
S = S < 10 ? "0" + S : S;
formatDateTime =
Y + "年" + M + "月" + D + "日" + H + ":" + Min + ":" + S;
return formatDateTime;
},
// 2022年4月26日 14:46:37(2) Method 2 yyyy-MM-dd hh:mm and yyyy-MM-dd are common
formatDate(data, fmt) {
let date = new Date(data);
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
(date.getFullYear() + "").substr(4 - RegExp.$1.length)
);
}
let o = {
"M+": date.getMonth() + 1,
"d+": date.getDate(),
"h+": date.getHours(),
"m+": date.getMinutes(),
"s+": date.getSeconds(),
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + "";
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length === 1 ? str : this.padLeftZero(str)
);
}
}
return fmt;
},
padLeftZero(str) {
return ("00" + str).substr(str.length);
},console.log(
this.formatDate(new Date(), "yyyy-MM-dd hh:mm"),
this.formatDate(new Date(), "yyyy-MM-dd")
);
// 2022-04-26 14:48
// 2022-04-262. Page clock - display time in real time
Effect:
1. Use v-html
v-html is used to update the innerHTML of the element
<span class="cur-date" v-html="dateFormatStr"></span>Content is inserted as plain HTML - it is not compiled as a Vue template.
Dynamically rendering arbitrary HTML on a website is very dangerous because it can easily lead to XSS attacks . Only use v-html on trusted content, never on user-submitted content.
2. Modify the format effect
// 年月日 时分秒 星期
dealWithTime(date) {
let data = new Date(date);
let formatDateTime;
let Y = data.getFullYear();
let M = data.getMonth() + 1;
let D = data.getDate();
let H = data.getHours();
let Min = data.getMinutes();
let S = data.getSeconds();
let W = data.getDay();
H = H < 10 ? "0" + H : H;
Min = Min < 10 ? "0" + Min : Min;
S = S < 10 ? "0" + S : S;
switch (W) {
case 0:
W = "日";
break;
case 1:
W = "一";
break;
case 2:
W = "二";
break;
case 3:
W = "三";
break;
case 4:
W = "四";
break;
case 5:
W = "五";
break;
case 6:
W = "六";
break;
default:
break;
}
this.dateFormatStr =
Y +
"<span >" +
" 年 " +
"</span>" +
M +
"<span >" +
" 月 " +
"</span>" +
D +
"<span>" +
" 日 / " +
"</span>" +
"<span >" +
" 星期" +
W +
" / " +
"</span>" +
"<span >" +
H +
":" +
Min +
":" +
S;
("</span>");
/* setInterval("dealWithTime()",1000);*/
},3. Set the timer
Create and execute the timer in the mounted function of the current page
//创建并执行定时器
let _this = this;
this.timer = setInterval(() => {
_this.dealWithTime(new Date());
}, 1000);Note: The timer needs to be destroyed in the beforeDestoryed function
beforeDestroy() {
clearInterval(this.timer);
},3. The countdown to the spike time difference
Effect:
1. Page layout
The id is used as a unique identifier to represent the day, hour, minute and second respectively
<div class="status-top">
<div>
<span id="_d">00</span>
<span id="_h">00</span>
<span id="_m">00</span>
<span id="_s">00</span>
</div>
</div>
<div class="status-bottom">应急时间</div>2. Modify the format effect
this.accidentTime represents the standard time, now = date.getTime(); represents the current time, use accidentTime-now to get: the elapsed time from the start of operation to the present.
Similarly, set the deadline endDate = new Date('2022-4-14 5:20:21'), now = date.getTime(); indicates the current time, and use end-now to get the remaining time.
// 年月日 时分秒 星期 this.acctidentTime 此处为设置的标准时间
countTime(data) {
if (this.accidentTime) {
let date = new Date(data);
//获取当前时间
// console.log("====countTime", this.accidentTime);
// var date = new Date();
var now = date.getTime();
//设置截止时间
var endDate = new Date(this.accidentTime);
var end = endDate.getTime();
//时间差
var leftTime = now - end;
//定义变量 d,h,m,s保存倒计时的时间
var d, h, m, s;
if (leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
m = Math.floor((leftTime / 1000 / 60) % 60);
s = Math.floor((leftTime / 1000) % 60);
}
//将倒计时赋值到div中
document.getElementById("_d").innerHTML = d + "天";
document.getElementById("_h").innerHTML = h + "时";
document.getElementById("_m").innerHTML = m + "分";
document.getElementById("_s").innerHTML = s + "秒";
//递归每秒调用countTime方法，显示动态时间效果
// setTimeout(countTime, 1000);
}
},3. Set the timer
//创建并执行定时器
let _this = this;
this.timer = setInterval(() => {
_this.countTime(new Date());
}, 1000);