在了解倒计时原理之前先了解一些时间戳
例如:12小时转换为时间戳
12✖️60✖️60✖️1000
第一个60单位分钟
第二个60单位是秒
第三个1000单位毫秒
未来某天的倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>倒计时</title>
</head>
<body>
<div id="app">
<div id="app">{{ `${day}天 ${hr}小时 ${min}分钟 ${sec}秒` }}</div>
</div>
<script>
vm = new Vue({
el:'#app',
data:{
day: 0, hr: 0, min: 0, sec: 0
},
created(){
this.futureDay()
},
methods:{
futureDay(){ //未来某天的倒计时
// 1、获取未来的日期
// 2、获现在的时间
// 3、未来的日期➖现在的时间
// 4、得到相减的结果,换算为,天-小时-分钟-秒
// 5、每隔1秒获取一次,直至相减为0(需自己做限制)
const end = Date.parse(new Date('2030-01-01'))
const now = Date.parse(new Date())
const msec = end - now
let day = parseInt(msec / 1000 / 60 / 60 / 24)
let hr = parseInt(msec / 1000 / 60 / 60 % 24)
let min = parseInt(msec / 1000 / 60 % 60)
let sec = parseInt(msec / 1000 % 60)
this.day = day
this.hr = hr > 9 ? hr : '0' + hr
this.min = min > 9 ? min : '0' + min
this.sec = sec > 9 ? sec : '0' + sec
setTimeout(() => {
this.futureDay()
}, 1000)
}
}
})
</script>
</body>
</html>
当前系统日期 - 当前系统时间计时读秒
下方如何渲染可以自主的调试 === 下方在线调试网址
https://jsrun.net/nzsKp/edit
**效果 ========= **
<div id="app">
<h1>{{ week }}</h1>
<h1>{{ date_show }}</h1>
<h1>{{ time_show }}</h1>
</div>
var app = new Vue({
el: '#app',
data() {
return {
week:'', // 星期几
date_show:'', // 日期
time_show:'',//当前时间
}
},
created(){
this.getTime = setInterval(()=>{
this.getnewTime()
},1000)
this.getdataTime() // 获取系统日期
},
methods: {
//获取当前系统的的日期
getdataTime(){
let wk = new Date().getDay()
let yy = new Date().getFullYear();
let mm = new Date().getMonth() + 1;
let dd = new Date().getDate();
let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
this.week = weeks[wk]
this.date_show = yy + "年" + mm + "月" + dd + "日"
},
// 获取当前系统的时间
getnewTime(){
let hh = new Date().getHours();
let mf = new Date().getMinutes() < 10
? "0" + new Date().getMinutes()
: new Date().getMinutes();
let ss = new Date().getSeconds() < 10
? "0" + new Date().getSeconds()
: new Date().getSeconds();
this.time_show = hh + ":" + mf + ":" + ss;
},
}
});