vue 实现指定日期之间的倒计时

效果图如下

此处使用moment.js 日期处理类库 使用方法如下

npm install moment 或者 yarn add moment

html

<div class="time-down"><div class="back">{{dayNum}}</div><div class="font-14 date">天</div><div class="back">{{hourNum}}</div><div class="font-14 date">时</div><div class="back">{{minuteNum}}</div><div class="font-14 date">分</div><div class="back">{{secondNum}}</div><div class="font-14 date">秒</div>
</div>

js

import moment from 'moment';
export default {name: 'TimeRangPage',props: {startTime: String,endTime: String},data () {return {days: 0,hours: 0,minutes: 0,seconds: 0,timeSetInterval: null,showTimeDown: false,showOver: false};},created () {if (moment(new Date()).isBefore(this.startTime)) {this.showTimeDown = true;this.timeDown();}if (moment(new Date()).isAfter(this.endTime)) this.showOver = true;},methods: {timeDown () {this.timeSetInterval = setInterval(() => {if (moment(this.startTime).isBefore(moment())) {this.showTimeDown = false;clearInterval(this.timeSetInterval);location.reload();}let dur = moment.duration(moment(this.startTime) - moment(), 'ms');this.days = dur.get('days');this.hours = dur.get('hours');this.minutes = dur.get('minutes');this.seconds = dur.get('seconds');}, 1000);}},computed: {dayNum () {if (this.days < 10) return '0' + this.days;return this.days;},hourNum () {if (this.hours < 10) return '0' + this.hours;return this.hours;},minuteNum () {if (this.minutes < 10) return '0' + this.minutes;return this.minutes;},secondNum () {if (this.seconds < 10) return '0' + this.seconds;return this.seconds;}}};

vue 实现指定日期之间的倒计时相关推荐

获取指定日期之间的各个周和月
2019独角兽企业重金招聘Python工程师标准>>> 日志格式化类 Date.class.php <?php class Datefmt{function __constru ...
计算当前时间到指定日期之间距离多久（494天11866小时711960分钟42717625秒）
import java.time.Duration; import java.time.LocalDateTime; import java.time.format.DateTimeFormatter ...
php计算指定日期之间的天数,php计算任意两个日期之间的天数
/* php计算任意两个日期之间的天数基本思想,算术减法: cur_date 2009 04 11 last_date - 2008 12 20 ---------------- ...
php输出指定日期,PHP 输出两个指定日期之间的所有日期
JavaScript的条件语句 JavaScript的条件语句 1.JavaScript的条件语句包括以下几个 (1)if - 只有当指定条件为true时,使用该语句来执行代码: (2)if...el ...
两个日期相差月份 java_Java获取两个指定日期之间的所有月份
String y1 = "2016-02";//开始时间 String y2 = "2019-12";//结束时间 try{ Date startDate= n ...
算法——指定日期的星期推算
最近闲来无事,突然想了解下中国农历与中国阳历之间的关系,经过一番调研发现这里面的水还比较深,涉及天文学.历史.宗教等一些知识,发现挺有意思的就准备做一系列的总结,主要是防止自己忘记了,而且搜索了一 ...
C#计算两个日期之间相差的天数
C#计算两个日期之间相差的天数 private int DateDiff(DateTime dateStart, DateTime dateEnd) { DateTime start = Conver ...
mysql计算日期间隔天数_mysql 计算两个日期之间的天数
需求:求现在与指定日期之间相隔天数首先创建一个包含时间字段的表格T如下: mysql> select * from T; +-------------+ | search_time | +-- ...
pandas使用query函数查询指定日期索引之间对应的dataframe数据行（select rows date index between a certain date interval)
pandas使用query函数查询指定日期索引之间对应的dataframe数据行(select rows where date index between a certain date interva ...

vue 实现指定日期之间的倒计时

效果图如下

html

js

vue 实现指定日期之间的倒计时相关推荐

最新文章

热门文章