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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
javascript prototype,executing,context,closure
2008/12/24 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
微信小程序 setData的使用方法详解
2017/04/20 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
Python运算符重载用法实例
2015/05/28 Python
Python制作简易注册登录系统
2016/12/15 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
Python函数参数分类原理详解
2020/05/28 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
为什么会有内存对齐
2016/10/10 面试题
总经理办公室主任岗位职责
2013/11/12 职场文书
平面设计岗位职责
2013/12/14 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
街道社区活动报告
2015/02/05 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
使用HttpSessionListener监听器实战
2022/03/17 Java/Android