重庆建设机电网站好看的网站ui

接下来的时候我想关注于node.js等一系前端知识，但是这个时间倒计时组件真的很突如其来，就在昨天，因为公司需求，要做一个倒计时，ok那没有问题，对于倒计时来说，一点都不难，肯定大家都写过，但是基于vue又是怎么样的原理，又如何去书写，那就来把。不费话不，不BB，直接上代码https://juejin.im/post/58e87c1bac502e006c35567e

接下来还是按着我们约定的来

2.代码运行vue-cli 2.1版本

3.组件代码都在components文件夹里

4.主代码逻辑都在 App.vue文件夹里

我什么都不要我只要

赞

components/zkTimeDown/zkTimeDown.vue

<template><p>{{time}}</p>
</template><script>export default{data () {return {time : '',flag : false}},mounted () {let time = setInterval(()=>{if(this.flag == true){clearInterval(time)}this.timeDown()},500)},props : {endTime : {type : String}},methods : {timeDown () {const endTime = new Date(this.endTime)const nowTime = new Date();let leftTime = parseInt((endTime.getTime()-nowTime.getTime())/1000)let d = parseInt(leftTime/(24*60*60))let h = this.formate(parseInt(leftTime/(60*60)%24))let m = this.formate(parseInt(leftTime/60%60))let s = this.formate(parseInt(leftTime%60))if(leftTime <= 0){this.flag = truethis.$emit('time-end')}this.time = `${d}天${h}小时${m}分${s}秒`},formate (time) {if(time>=10){return time}else{return `0${time}`}}}}
</script>

这玩意真一眼就看明白了
1.props : 首先我们要接收父组件一个数据props里，我们要接收的是一个结束时间
2.methods : formate我们是对时间的时分秒进行了格式化
timeDown方法我们对倒计时的写法在，主要是把结束时间和当前时相减，然后再转化面毫秒进行天·时·分·秒的计算，lefttime为0的时候，我们进行关闭定时器，再向外通知时间结束，触发end-time事件

App.vue

<template><div><zk-time-down @time-end="message = '倒计时结束'" :endTime='endTime'></zk-time-down><p>{{message}}</p> </div>
</template><script>
import zkTimeDown from './components/zkTimeDown/zkTimeDown.vue'
export default {components : {zkTimeDown},data () {return {message : '正在倒计时',endTime : '2017-04-08 10:06:00'}}
}
</script><style>
</style>

如果大家要试的话，请改变当前data里endTime的时间，一定要大于当前时间，我省去了做验证的一部分

我们在组件上监听倒计时时间，当倒计时时间结束的时候，触发一个事件，基于这个倒计时，大家可以充分的去想象一下别的更有趣倒计时的用法，和写法，和一些根据自己的业务逻辑去自定义一些倒计时的逻辑。

这期分享的比较简短，因为例子也不难，大家很容易消化，我所分享的也不是什么高深的东西，都是实际工作中需要用到的东西，谢谢