vue实现倒计时功能


Posted in Vue.js onMarch 24, 2021

通过父组件传入的结束时间减去当前日期得到剩余时间

1.子组件部分

<div class="itemend">
 <p class="itemss">倒计时<span>{{day}}</span>天<span>{{hour}}</span>时<span>{{minute}}</span>分<span>{{second}}</span>秒</p>
</div>

代码:

data() {
 return {
 day: "", //天
 hour: "", //时
 minute: "", //分
 second: "", //秒
 flag: false,
 };
 },
 mounted() {
 let time = setInterval(() => {
 if (this.flag == true) {
 clearInterval(time);
 }
 this.timeDown();
 }, 500);
 },
 props: {
 endTime: {
 type: String,
 },
 },
 methods: {
 timeDown() {
 const endTime = new Date(this.endTime);
 const nowTime = new Date();
 let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
 let d = parseInt(leftTime / (24 * 60 * 60));
 let h = this.formate(parseInt((leftTime / (60 * 60)) % 24));
 let m = this.formate(parseInt((leftTime / 60) % 60));
 let s = this.formate(parseInt(leftTime % 60));
 if (leftTime <= 0) {
 this.flag = true;
 this.$emit("time-end");
 }
 this.day = d; //天
 this.hour = h; //时
 this.minute = m; //分
 this.second = s; //秒
 },
 formate(time) {
 if (time >= 10) {
 return time;
 } else {
 return `0${time}`;
 }
 },
}

2.父组件引用

<template>
 <div>
 <Times :endTime='timeEnd'></Times>
 </div> 
</template>
 
import Times from "@/components/time";
export default {
 name: "Home",
 data() {
 return {
 timeEnd: "2021-3-30 9:50" //结束时间(苹果手机无法解析"-" 可以将格式改为2021/3/30)
 },
  
 components: {
 Times,
 },
};

 

Vue.js 相关文章推荐
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
使用Vue.js和MJML创建响应式电子邮件
vue+flask实现视频合成功能(拖拽上传)
Mar 04 #Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 #Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 #Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 #Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 #Vue.js
You might like
两种php调用Java对象的方法
2006/10/09 PHP
PHP的分页功能
2007/03/21 PHP
真正的ZIP文件操作类(php)
2007/07/21 PHP
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
php经典算法集锦
2015/11/14 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
用python代码做configure文件
2014/07/20 Python
举例讲解Python中装饰器的用法
2015/04/27 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
django2 快速安装指南分享
2018/01/05 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
详解python polyscope库的安装和例程
2020/11/13 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
餐厅采购员岗位职责
2014/03/06 职场文书
社区党建工作方案
2014/06/10 职场文书
环保志愿者活动方案
2014/08/14 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
主持人开幕词
2015/01/29 职场文书
财务人员岗位职责
2015/02/03 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书