vue+moment实现倒计时效果
作者:Aesopcmc 发布时间:2024-05-09 10:43:55
标签: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)
}
}
}
},
}
来源:https://blog.csdn.net/u014438244/article/details/89915073


猜你喜欢
- 前言本博客重点内容:reportlab生成流文件格式、reportlab分页和图片流文件写入reportlab等。我讲一下我这个需求的来源,
- 单位内部网站第三次修改,即将进入尾声,遇到一个怪现象,就是在自定义标签中,加入链接会被替换掉成这样的格式{$GetInstallDir}ad
- 1. 2D坐标轴1.1 绘制简单的曲线import matplotlib.pyplot as pltimport numpy as npx=
- 1、在给客户系统巡检时通过rman维护日志发现有rman维护日志报错:RMAN-06207: WARNING: 3 objects coul
- python DataFrame的合并方法Python的Pandas针对DataFrame,Series提供了多个合并函数,通过参数的调整可
- 在有些情况下,利用try…except来捕捉异常可以起到代替if…else的作用。比如在判断一个链表是否存在环的leetcode题目中,初始
- 支持按照文件夹去批量处理,也可以单独一个文件进行处理,并且可以自定义标识符最近在开发一个答题类的小程序,到了录入试题进行测试的时候了,发现一
- 在使用出colab进行模型训练时,发现colab的python版本更新为了3.7.11,而我的代码要在python3.6下才行配置好环境,于
- 关于JavaSctipt的兼容性,最懒的办法就是用jQuery的工具函数。尽量不要用那些什么ECMAScript之类的函数,因为很多浏览器都
- 点阵字体是指根据文字的像素点来显示的字体,效果如下:使用Python读取并显示的过程如下:根据中文字符获取GB2312编码通过GB2312编
- Python 链接抖音python下载抖音内容的帖子网上有一些,但都比较麻烦,需要通过adb连接安卓手机后,模拟操作。我这么懒,这种事儿玩不
- 要实现功能,首先要做前端,经过对比其他网站的在线聊天功能,发现除了基本的聊天功能以外,还要注意以下几点.一次只能和一个人聊天,但是可以随意切
- 最初开发的 Matplotlib,仅支持绘制 2d 图形,后来随着版本的不断更新, Matplotlib 在二维绘图的基础上,构建了一部分较
- 一,啥是Block Formatting Context当涉及到可视化布局的时候,Block Formatting Context提供了一个
- 在多数情况下,以增加文件大小代价来换连接数是有价值。而MHTML+dataURI = 省连接数,如果你不知道这是什么东东,可以看秦歌写的Da
- 项目使用Pyqt作为UI框架,使用相机线程捕捉image,并在QGraphicsView中显示,遇到以下问题:1、采集的数据为nparray
- 一段这样的JavaScript代码,猜猜结果如何?var i = 0, m =
- 介绍我们在实际的开发工作中需要将django框架与swagger进行集成,用于生成API文档。网上也有一些关于django集成swagger
- 今在服务器上 有mysql 数据库,远程访问,不想公布root账户,所以,创建了demo账户,允许demo账户在任何地方都能访问mysql数
- 最近买了个腾讯云服务器,搭建环境。该笔记用于系统上未装过mysql的干净系统第一次安装mysql。自己指定安装目录,指定数据文件目录。lin