标签：更新 time 结构 rip col 开始 数据 default style
创建一个 countdown 方法，用于计算并在控制台打印距目标时间的日、时、分、秒数，每隔一秒递归执行一次。
msec 是当前时间距目标时间的毫秒数，由时间戳相减得到，我们将以这个数为基础计算。我们都知道1天等于24小时，1小时等于60分钟，1分钟等于60秒，1秒等于1000毫秒。所以，msec / 1000 / 60 / 60 / 24 保留整数就是天数。如果换用 % 取余数，再保留整数后得到的就是小时数。以此类推就能算出其他所有数。
function countdown () { // 目标日期时间戳 const end = Date.parse(new Date(‘2017-12-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) // 个位数前补零 hr = hr > 9 ? hr : ‘0‘ + hr min = min > 9 ? min : ‘0‘ + min sec = sec > 9 ? sec : ‘0‘ + sec // 控制台打印 console.log(`${day}天 ${hr}小时 ${min}分钟 ${sec}秒`) // 一秒后递归 setTimeout(function () { countdown() }, 1000) }
控制台打印结果：
27天 07小时 49分钟 10秒
27天 07小时 49分钟 09秒
27天 07小时 49分钟 08秒
...
如果单纯使用 JavaScript ，我们需要在每次计算后手动更新 DOM 元素（将数据显示给用户），既不方便又难以维护。实际项目中更多的是配合前端框架，将计算结果实时渲染到页面上。
页面结构中的数据来自 Vue 实例的 data 对象。
<div id="app">{{ `${day}天 ${hr}小时 ${min}分钟 ${sec}分钟` }}</div>
mounted 是 Vue 的生命周期方法，可以理解为在页面加载完毕后执行 countdown 方法。countdown 方法每隔一秒会执行一次，并将计算结果分别赋予变量 day、hr、min、sec，同时改变的还有页面上显示的内容。
new Vue({ el: ‘#app‘, data: function () { return { day: 0, hr: 0, min: 0, sec: 0 } }, mounted: function () { this.countdown() }, methods: { countdown: function () { const end = Date.parse(new Date(‘2017-12-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 const that = this setTimeout(function () { that.countdown() }, 1000) } } })
上述摘自网上 ，对于vue的写法我个人有一个优化,当我们离开吗，某个界面时不应该让他在计时,而是我们在当前页面的时候才计时这样显得更合理一点
<template>
<span v-if="Date.parse(new Date(deadline)) <= Date.parse(new Date()) && Date.parse(new Date()) < Date.parse(new Date(start))">待开始</span>
<span v-else-if="Date.parse(new Date())===Date.parse(new Date(start))">已开始</span>
<span v-else>倒计时{{`${day}天${hr}小时${min}分钟${sec}秒`}}</span>
</template>
<script>
export default {
props: [‘deadline‘, ‘start‘],
name: "dateComponent",
data: function () {
return {
day: 0, hr: 0, min: 0, sec: 0,
}
},
mounted: function () {
this._interval = setInterval(() => {
this.countdown();
}, 1000)
},
destroyed () {
clearInterval(this._interval)
},
methods: {
countdown: function () {
const end = Date.parse(new Date(this.start));
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;
// const that = this;
// console.log(this.day===0 && this.hr===‘00‘ && this.min===‘00‘&& this.sec===‘00‘);
// if(this.day===0 && this.hr=== ‘00‘ && this.min===‘00‘&& this.sec ===‘00‘){
// console.log(1234566)
// return
// }
// setTimeout(function () {
// that.countdown()
// }, 1000)
}
},
}
</script>
<style scoped>
</style>
标签：更新 time 结构 rip col 开始 数据 default style
原文地址：https://www.cnblogs.com/ctztake/p/8890761.html
