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-router定义元信息meta操作
Dec 07 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
php实现Session存储到Redis
2015/11/11 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
《会变的花树叶》教学反思
2014/02/10 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
新闻学专业求职信
2014/07/28 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang