Vue实现倒计时组件(可自定义时间倒计时功能的组件)：

一、创建countDown.vue（倒计时组件）：

<template><span :endTime="endTime" :endText="endText"><slot>{{content}}</slot></span>
</template><script>export default {data(){return {content: '',}},props:{//接收父组件的数据endTime:{type:String,default:''},endText:{type:String,default:'活动已结束'},},watch: {//监听时间的变化endTime() {this.countdowm(this.endTime)}},mounted () {this.countdowm(this.endTime)},methods: {countdowm(timestamp){let self = this;let timer = setInterval(function(){let nowTime = new Date();let endTime = new Date(timestamp * 1000);let t = endTime.getTime() - nowTime.getTime();if(t>0){let day = Math.floor(t/86400000);let hour=Math.floor((t/3600000)%24);let min=Math.floor((t/60000)%60);let sec=Math.floor((t/1000)%60);hour = hour < 10 ? "0" + hour : hour;min = min < 10 ? "0" + min : min;sec = sec < 10 ? "0" + sec : sec;let format = '';if(day > 0){format = `${day}天${hour}小时${min}分${sec}秒`;}if(day <= 0 && hour > 0 ){format = `${hour}小时${min}分${sec}秒`;}if(day <= 0 && hour <= 0){format =`${min}分${sec}秒`;}self.content = format;}else{clearInterval(timer);self.content = self.endText;}},1000);}}}
</script>

二、vue倒计时组件的使用方法（父组件里面）：

<template><count-down :endTime="endTime" :endText="endText " />
</template><script>
import countDown from '@/components/countDown'//引入路径，可更改export default {data() {return{endTime:new Date("2022/04/18 08:00:20").getTime() / 1000 +  ' ',//  console.log(endTime)=>得到毫秒  1658030420 可在方法里面放入后台数据,new Date('放后台数据').getTime() / 1000 +  ' ',但要记得调用方法endText:'',}},components: {countDown},
}
</script>

说明一下：

1）endTime是一个时间戳，而且是字符串数据类型，需要处理下let endTime = new Date("2022/04/18 08:00:20").getTime() / 1000 +  ' '2）endText是倒计时结束显示的内容

三、vue倒计时组件效果如下：

Vue实现倒计时组件(可自定义时间倒计时功能的组件)：相关推荐

js实现倒计时，定时器--完成时间倒计时
js实现倒计时,定时器–完成时间倒计时 //每秒刷新一次 setInterval(function showtime() {//结束时间var endTime = document.getElemen ...
组件分享之前端组件——用于自定义表单的前端组件form-create
组件分享之前端组件--用于自定义表单的前端组件form-create 背景近期正在探索前端.后端.系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各 ...
自定义圆形倒计时Android,Android自定义View倒计时圆
本文实例为大家分享了Android自定义View倒计时圆的具体代码,供大家参考,具体内容如下创建attr 创建DisplayUtil 类 import android.content.Context ...
html 最新计算倒计时,javascript实时计算时间倒计时
我们在开发中接愿目的那前机专容图缩近上意对这些端制门经常遇到需要实时展示倒计时时间在页面中:我们此时需要后端返回一个剩余的时间值(一般精确到毫秒值):通过这个值再来实时判断体朋几一级发等点确层数框的很 ...
Vue.js父与子组件之间传参父向子组件传参　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
Vue.js父与子组件之间传参父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
小程序制作自定义弹层添加弹层显示和隐藏动画父组件与子组件（自定义组件）之间传值
0.说明与效果本文打算用一个具体的例子,总结下这些开发过程中学习到的知识: 1.制作自定义组件,并在页面中引用 2.自定义组件的内容是一个表单弹层,添加弹层在弹出和隐藏时的动画 3.展示父组件与子组 ...
【uniapp前端组件】自定义车牌键盘
自定义车牌输入键盘–车牌键盘简介本组件根据自定义万能键盘(数字键盘.身份证键盘.带小数点数字键盘.车牌键盘)升级而来,老组件代码有点看不懂了,哈哈哈哈.另外数字键盘.身份证键盘.小数点数字键盘un ...
vue\uniapp自定义活动倒计时组件
vue\uniapp自定义活动倒计时组件效果调用组件时传递的 timeData的属性type_id:名称,begin_time:开始时间(时间戳)end_time:结束时间(时间戳) 组件代码 & ...
jquery倒计时插件可自定义多个倒计时间
jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...

Vue实现倒计时组件(可自定义时间倒计时功能的组件)：

一、创建countDown.vue（倒计时组件）：

二、vue倒计时组件的使用方法（父组件里面）：

三、vue倒计时组件效果如下：

Vue实现倒计时组件(可自定义时间倒计时功能的组件)：相关推荐

最新文章

热门文章