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使用Elementui修改默认的最快方法
Dec 05 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 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
oracle资料库函式库
2006/10/09 PHP
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
PHP反射基础知识回顾
2020/09/10 PHP
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
js实现楼层导航功能
2017/02/23 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Python进程间通信Queue实例解析
2018/01/25 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
python输出决策树图形的例子
2019/08/09 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
物流管理应届生求职信
2013/11/07 职场文书
总经理助理职责
2014/02/04 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
Golang连接并操作MySQL
2022/04/14 MySQL