下面给出一个效果图,我今天要说的就是实现下图这种多个倒计时
很多时候我们做只有一个倒计时的情况比较多,比较简单只需要一个定时器setInterval,算出来赋赋值就好,
但是需要多个倒计时的时候我们就要考虑把倒计时封装成通用的方法了
拿我自己的vue项目举个例
<!-- template --> <div v-for="(item,index) in list" :key="index" class="act_item"> <h1>{{ item.title }}</h1> <img :src="/UploadFiles/2021-04-02/item.pic"><script> function InitTime(endtime){ var dd,hh,mm,ss = null; var time = parseInt(endtime) - new Date().getTime(); if(time<=0){ return '结束' }else{ dd = Math.floor(time / 60 / 60 / 24); hh = Math.floor((time / 60 / 60) % 24); mm = Math.floor((time / 60) % 60); ss = Math.floor(time % 60); var str = dd+"天"+hh+"小时"+mm+"分"+ss+"秒"; return str; } } export default { data () { return { active: 'tab-container1', pinkFont:true, // 上拉刷新、下拉加载 allLoaded: false, //如果为true,禁止上拉刷新 autoFill: false, //取消自动填充, list: [], } }, created() { var ssss = [ {"title": "小心愿,大梦想","pic":"../../assets/img/new/act1.jpg","count":"34","time":"1525293470350"}, {"title": "杭州国际时装周童模招募","pic":"../../assets/img/new/act2.jpg","count":"36","time":"1525293470350"}, {"title": "怪兽bobo全线代言火爆杭城的联名秀招募童模啦!","pic":"../../assets/img/new/act3.jpg","count":"74","time":"1529253270350"}, {"title": "汉风唐韵 、别","pic":"../../assets/img/new/act2.jpg","count":"266","time":"1525753270350"}, {"title": "听说你们想和明星超模同台“PK”?","pic":"../../assets/img/new/act1.jpg","count":"97","time":"1525253270450"}, ]; ssss.map( (obj,index)=>{ this.$set( obj,"djs",InitTime(obj.time) ); }) this.list = ssss; }, mounted() { setInterval( ()=> { for (var key in this.list) { var aaa = parseInt( this.list[key]["time"] ); var bbb = new Date().getTime(); var rightTime = aaa - bbb; if (rightTime > 0) { var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24); var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24); var mm = Math.floor((rightTime / 1000 / 60) % 60); var ss = Math.floor((rightTime / 1000) % 60); } this.list[key]["djs"] = dd + "天" + hh + "小时" + mm + "分" + ss + "秒"; } }, 1000); }, methods: { } } </script>需要注意的是this.$set(obj,"djs",InitTime(obj.time)代码,在一个对象已经有了的情况下,假如此时object里没有djs这个元素,直接object.djs = "要赋的值"这样的做法是不正确的,可能会赋值成功,但是会出现很多奇怪的问题,推荐用
this.$set(object,'djs','要赋的值');
以上所述是小编给大家介绍的vue中多个倒计时实现详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]