vue实时显示当前时间
<!--时间--><template><span class="time" id="time"><span class="date">{{ nowTime }}</span><span class="hour"></span><a class="split">:</a><span cl
·
<!--时间-->
<template>
<span class="time" id="time">
<span class="date">{{ nowTime }}</span>
<span class="hour"></span>
<a class="split">:</a>
<span class="minitus"></span>
<a class="split">:</a>
<span class="seconds"></span>
</span>
</template>
<script>
export default {
name: "time-untils",
props: ["s"],
data() {
return {
time: {
hour: "",
minitus: "",
seconds: ""
},
nowTime: "",
week: [
"星期天",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六"
]
};
},
mounted() {
this.dateTime();
},
methods: {
dateTime() {
this.timeFormate();
setTimeout(() => {
this.dateTime();
}, 1000);
},
timeFormate() {
const newtime = new Date();
this.time.hour = this.getIncrease(newtime.getHours(), 2);
this.time.minitus = this.getIncrease(newtime.getMinutes(), 2);
this.time.seconds = this.getIncrease(newtime.getSeconds(), 2);
this.nowTime =
this.getIncrease(newtime.getFullYear(), 4) +
"年" +
this.getIncrease(newtime.getMonth() + 1, 2) +
"月" +
this.getIncrease(newtime.getDate(), 2) +
"日 " +
this.week[newtime.getDay()];
return `${this.time.hour}:${this.time.minitus}:${this.time.seconds}`;
},
getIncrease(num, digit) {
var increase = "";
for (var i = 0; i < digit; i++) {
increase += "0";
}
return (increase + num).slice(-digit);
}
}
};
</script>
<style lang="scss" scoped>
.txt-data .time {
font-size: 1rem;
margin-right: 0.5rem;
}
.split {
animation: shark 1s step-end infinite;
}
@keyframes shark {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
</style>
css实现当前时间
<script>
export default {
data() {
return {
nowTime: "",
timeId: ""
};
},
created() {},
mounted() {
this.showTime();
},
methods: {
sitTime() {
const d = new Date();
const h = d.getHours();
const m = d.getMinutes();
const s = d.getSeconds();
time.style.setProperty("--ds", s);
time.style.setProperty("--dm", m + s / 60);
time.style.setProperty("--dh", h + m / 60 + s / 3600);
},
// 显示当前时间
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 week = new Date(timeStamp).getDay();
let weeks = ["日", "一", "二", "三", "四", "五", "六"];
let getWeek = "星期" + weeks[week];
this.nowTime = year + "年" + month + "月" + date + "日 " + getWeek;
},
showTime() {
this.timeFormate(new Date());
this.sitTime();
this.timeId = setTimeout(this.showTime, 1000 * 60 * 60 * 24);//对日期实施有限制,设置1000可以避免,但是用css就没意义
},
beforeDestroy() {
//实例销毁前清除定时器
if (this.timeId) {
clearInterval(this.timeId);
}
}
}
};
</script>
<style lang="scss" scoped>
@property --h {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
@property --m {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
@property --s {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
.time {
display: flex;
align-items: center;
justify-content: center;
--step: 60s;
font-family: Consolas, Monaco, monospace;
font-size: 1rem;
.date {
margin-right: 0.5rem;
}
}
.split {
animation: shark 1s step-end infinite;
}
.hour::after {
counter-reset: hour var(--h);
content: counter(hour, decimal-leading-zero);
animation: hour calc(var(--step) * 60 * 24) infinite steps(24);
animation-delay: calc(-1 * var(--step) * var(--dh) * 60);
}
.minitus::after {
counter-reset: minitus var(--m);
content: counter(minitus, decimal-leading-zero);
animation: minitus calc(var(--step) * 60) infinite steps(60);
animation-delay: calc(-1 * var(--step) * var(--dm));
}
.seconds::after {
counter-reset: seconds var(--s);
content: counter(seconds, decimal-leading-zero);
animation: seconds var(--step) infinite steps(60);
animation-delay: calc(-1 * var(--step) * var(--ds) / 60);
}
@keyframes hour {
to {
--h: 24;
}
}
@keyframes minitus {
to {
--m: 60;
}
}
@keyframes seconds {
to {
--s: 60;
}
}
@keyframes shark {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
</style>
参考:
更多推荐
所有评论(0)