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 22 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
关于vue-router-link选择样式设置
Apr 30 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实现的简单缓存类
2015/07/29 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Python中is和==的区别详解
2018/11/15 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
学习雷锋精神演讲稿
2014/05/10 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
单身证明格式样本
2015/06/15 职场文书
人代会简报
2015/07/21 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
k8s部署redis cluster集群的实现
2021/06/24 Redis
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python