vue+moment实现倒计时效果


Posted in Javascript onAugust 26, 2019

本文实例为大家分享了vue+moment实现倒计时的具体代码,供大家参考,具体内容如下

示例

vue+moment实现倒计时效果

代码

<!-- 使用计算属性,传入截止日期 -->
<span>{{countDown(endDate)}}</span>
/*引入日期插件*/
import moment from 'moment'
export default {
 data() {
 return {
 now: moment(),
 endDate: '2019-05-07 08:20:00',
 }
 },
 mounted() {
 //定时更新当前时间
 setInterval(()=>{
 this.now = moment()
 },1000),
 //数字前补 0 
 // num传入的数字,n需要的字符长度
 PrefixInteger(num, n) {
 return (Array(n).join(0) + num).slice(-n);
 }
 },
 computed: {
 //计算属性,返回剩余时间
 countDown(){
 return function(endDate) {
 let m1 = this.now
 let m2 = moment(endDate)
 var du = moment.duration(m2 - m1, 'ms'),
 hours = du.get('hours'),
 mins = du.get('minutes'),
 ss = du.get('seconds');
 if(hours<=0 && mins<=0 && ss<=0) {
  return "已超时"
 }else {
  return this.PrefixInteger(hours,2) + ':' + this.PrefixInteger(mins,2) + ':' + this.PrefixInteger(ss,2)
 }
 }
 }
 },
}

更多关于倒计时的文章请查看专题:《倒计时功能》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 #Javascript
Moment.js实现多个同时倒计时
Aug 26 #Javascript
vue获取验证码倒计时组件
Aug 26 #Javascript
seajs和requirejs模块化简单案例分析
Aug 26 #Javascript
JavaScript实现身份证验证代码实例
Aug 26 #Javascript
基于vue、react实现倒计时效果
Aug 26 #Javascript
tweenjs缓动算法的使用实例分析
Aug 26 #Javascript
You might like
PHP4之真OO
2006/10/09 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
详解Python中用于计算指数的exp()方法
2015/05/14 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
python hash每次调用结果不同的原因
2019/11/21 Python
tensorflow 环境变量设置方式
2020/02/06 Python
股权投资意向书
2014/04/01 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
法制主题班会教案
2015/08/13 职场文书