vue实现时间倒计时功能
本文实例为大家分享了vue实现时间倒计时功能的具体代码,供大家参考,具体内容如下
需求:
做一个剩余支付时间倒计时的效果
效果图:
文章图片
代码:
剩余支付时间:{{count}}
时间的秒数可以根据自己的需求进行修改
再为大家分享一段代码:vue时分秒倒计时
countTime: function () {//获取当前时间var date = new Date(); var now = date.getTime(); //设置截止时间var endDate = new Date("2018-10-22 23:23:23"); var end = endDate.getTime(); //时间差var leftTime = end - now; //定义变量 d,h,m,s保存倒计时的时间if (leftTime >= 0) {d = Math.floor(leftTime / 1000 / 60 / 60 / 24); this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24); this.m = Math.floor(leftTime / 1000 / 60 % 60); this.s = Math.floor(leftTime / 1000 % 60); }console.log(this.s); //递归每秒调用countTime方法,显示动态时间效果setTimeout(this.countTime, 1000); }
更多关于倒计时的文章请查看专题:《倒计时功能》
【vue实现时间倒计时功能】以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- 20170612时间和注意力开销记录
- 时间老了
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- Eddy小文
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现