vue--倒计时
一、基础倒计时
html部分
<div>{{countDownList}}</div>
script部分
export default { data() { return { countDownList: '00天00时00分00秒', actEndTime: '2018-11-19 18:50:00' }; }, created() { this.countDown(); }, methods: { timeFormat(param) { return param < 10 ? '0' + param : param; }, countDown(it) { var interval = setInterval(() => { // 获取当前时间,同时得到活动结束时间数组 let newTime = new Date().getTime(); // 对结束时间进行处理渲染到页面 let endTime = new Date(this.actEndTime).getTime(); let obj = null; // 如果活动未结束,对时间进行处理 if (endTime - newTime > 0) { let time = (endTime - newTime) / 1000; // 获取天、时、分、秒 let day = parseInt(time / (60 * 60 * 24)); let hou = parseInt(time % (60 * 60 * 24) / 3600); let min = parseInt(time % (60 * 60 * 24) % 3600 / 60); let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60); obj = { day: this.timeFormat(day), hou: this.timeFormat(hou), min: this.timeFormat(min), sec: this.timeFormat(sec) }; } else { // 活动已结束,全部设置为'00' obj = { day: '00', hou: '00', min: '00', sec: '00' }; clearInterval(interval); } this.countDownList = obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'; }, 1000); } } }
二、数组对象倒计时(多个计时器同时执行)
html部分
<div class="all" ref="providall"> <ul> <li v-for="(item,index) of iconlistall" :key="index"> <div class="lileft"> <p v-if="item.pre_attt > 0">计时:{{time(item.pre_attt)}}</p> </div> </li> </ul> </div>
script部分
export default { data() { return { iconlist: [], ticker: null, d: "", h: "", m: "", s: "" }; }, computed: { //这里是计算自定义数组的变化 因为有一个计时器每秒都会减去数组中字段的时间 所以 数组是每秒更新的 iconlistall: { get() { return this.iconlist; } } }, methods: { beginTimer() { //这个计时器是每秒减去数组中指定字段的时间 this.ticker = setInterval(() => { for (let i = 0, len = this.iconlist.length; i < len; i++) { const item = this.iconlist[i]; if (item.pre_attt > 0) { item.pre_attt = item.pre_attt - 1000; } } }, 1000); }, time(time) { //这个函数是每秒把时间重新计算下 if (time >= 0) { let d = Math.floor(time / 1000 / 60 / 60 / 24); let h = Math.floor((time / 1000 / 60 / 60) % 24); let m = Math.floor((time / 1000 / 60) % 60); let s = Math.floor((time / 1000) % 60); return d + "天" + h + "时" + m + "分" + s + "秒"; } } }, created() { //这里是假的数据 let list = [ { pre_at: "2020-04-05" }, { pre_at: "2020-04-07 16:18:36" }, { pre_at: "2020-05-04" } ]; //首先循环数组 在 正常的情况下这个数组是后台传递过来的 然后将这个数组中的最后截止时间减去当前时间获得时间戳 for (let i = 0, len = list.length; i < len; i++) { const item = list[i]; item.pre_attt = new Date(item.pre_at).getTime() - new Date().getTime(); } this.iconlist = list; //将改变后的数组赋值给自定义的数组 然后调用计时器 每秒减去指定字段的时间戳 -1000毫秒 if (this.ticker) { //这一段是防止进入页面出去后再进来计时器重复启动 clearInterval(this.ticker); } this.beginTimer(); //启动计时器减指定字段的时间 },