VUE组件日时分秒倒计时

因为产品说需要取服务器的时间戳，所以nowTime是从服务器取的当前时间戳，没有这个要求可以用new Date().getTime()代替；

组件代码

<template><div class="DayDown"><span>{{ dayString }}</span><span>{{ hourString }}</span><span>{{ minuteString }}</span><span>{{ secondString }}</span></div>
</template>
<script>
export default {data () {return {day: '',hour: '',minute: '',second: '',promiseTimer: ''};},props: {endTime: {default: ''},nowTime: {default: ''}},watch: {endTime (val, old) {if (val !== old) {this.DayDown();}}},mounted () {this.DayDown();},methods: {DayDown () {clearInterval(this.promiseTimer);this.promiseTimer = setInterval(() => {const remainTime = this.endTime - this.nowTime;if (remainTime >= 0) {this.day = Math.floor(remainTime / (60 * 60 * 24));this.hour = Math.floor(remainTime / 60 / 60 % 24);this.minute = Math.floor((remainTime % 3600) / 60);this.second = Math.floor((remainTime % 3600) % 60);this.$emit('subtract');} else {this.day = 0;this.hour = 0;this.minute = 0;this.second = 0;this.$emit('end');clearInterval(this.promiseTimer);}}, 1000);},formatNum (num) {if (num) {return num < 10 ? '0' + num : '' + num;} else {return '00';}}},computed: {dayString () {return this.formatNum(this.day);},hourString () {return this.formatNum(this.hour);},minuteString () {return this.formatNum(this.minute);},secondString () {return this.formatNum(this.second);}}
};
</script>
<style scoped>
.DayDown span{padding: 5px;background-color: #000;color: #fff;border-radius: 4px;
}
</style>

父组件代码

<template><div><<day-down :endTime="info.startTime / 1000" v-if="info.endTime&& nowTime" @end="getSaleDetail" :nowTime="nowTime / 1000" @subtract="subtract"></day-down></div>
</template><script>
import DayDown from '../components/DayDown.vue';
export default {components: { DayDown },data () {return {nowTime: null,info: {}};},mounted () {},methods: {// 传给组件的时间戳是秒// getSaleDetail是刷新数据方法// 减当前时间戳subtract () {this.nowTime += 1000;},}
};
</script>

VUE组件日时分秒倒计时相关推荐

【js】日时分秒倒计时
<div class="widgetDock" style="height: 5px;"><div cla ...
时分秒倒计时的js实现
时分秒倒计时的js实现 2016年06月01日 11:51:45 阅读数:6587 时分秒倒计时的js实现,如图: 闲话少说,直接上代码. html代码: <div id="timer ...
linux脚本计时,Linux用脚本实现“时分秒“倒计时功能
1.怎样实现"时分秒"倒计时在Linux下,脚本的完成相对于C语言来说稍微随意一点,可以按照字的想法写,只要有逻辑就可以了. 示例: 注意: clean的功能这个命令将会刷新屏 ...
linux 多线程实现倒计时,Linux用脚本实现“时分秒“倒计时功能
1.怎样实现"时分秒"倒计时在Linux下,脚本的完成相对于C语言来说稍微随意一点,可以按照字的想法写,只要有逻辑就可以了. 示例: 注意: clean的功能这个命令将会刷新屏 ...
android 万能倒计时，时分秒倒计时
1.工具类 /*** 作者:created by meixi* 邮箱:15913707499@163.com* 日期:2018/12/28 15*/public class TimerUtil {pr ...
android倒计时动画特效,Android仿活动时分秒倒计时效果
本文实例为大家分享了Android时分秒倒计时效果的具体代码,供大家参考,具体内容如下从mian.xml下手: xmlns:tools="http://schemas.android.co ...
php 日期相减时分秒,PHP计算两个时间戳间隔的日时分秒的代码实例
关于PHP计算两个时间戳之间相差的日时分秒的代码下面是PHP计算两个时间戳间隔的日时分秒的代码实例的相关内容,文章教程主要讲述与时间戳间隔分秒相关的一些技术与知识,更多的内容欢迎大家访问htt ...
商城倒计时（时分秒倒计时、分秒毫秒倒计时）
1.布局用法引用项目coutdowntimelibrary的CountDownView 如下 <carraydraw.com.coutdowntimelibrary.countdown.Co ...
java 秒转换日期_Java 将日期或秒数转换为日时分秒
```java import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; / ...

VUE组件日时分秒倒计时

VUE组件日时分秒倒计时相关推荐

最新文章

热门文章