vue-实现倒计时功能
2018-04-20 14:29
881 查看
JavaScript
创建一个
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秒 ...
Vue.js
如果单纯使用 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>
相关文章推荐
- 简单实现vue验证码60秒倒计时功能
- 注册/找回密码等功能中发送手机验证码后倒计时效果的实现(基于vue)
- vue实现验证码按钮倒计时功能
- Vue中使用vue-i18插件实现多语言切换功能
- JS 实现获取验证码 倒计时功能
- jQuery实现倒计时功能 jQuery实现计时器功能
- vue中引用pdf.js,实现在线浏览禁止下载、打印的功能
- Android开发中倒计时功能的实现
- android短信验证码功能实现,包含按钮倒计时操作
- 倒计时功能的实现
- VUE的axios实现excel导出下载功能
- 递归实现获取短信验证码按钮时间倒计时显示功能
- 使用JS实现倒计时功能(http://www.cnblogs.com/doll-net)
- 使用GCD 实现倒计时功能
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- vue实现百度搜索下拉提示功能
- Vue中使用sass实现换肤功能
- 脚本——倒计时,ping,创建用户,作业:ssh并创建用户(未能实现功能)
- js实现倒计时功能
- cocos2d JS 利用定时器实现-倒计时功能