前端vue倒计时组件【模块化开发】
剑阁峥嵘而崔嵬,一夫当关,万夫莫开 –‰
📌博主介绍
💒首页:水香木鱼
🛫专栏:后台管理系统
✍简介: 博主姓:陈,名:春波。花名 “水香木鱼”,星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”
🔰 格言: 生活是一面镜子。 你对它笑, 它就对你笑; 你对它哭, 它也对你哭。
🔋 小目标: 成为 会设计 、会开发的 “万能钥匙”
📝文章内容
✍ 一、组件代码
<!--活动倒计时组件-->
<style lang="less" scoped>
.CountDown{
width: 280px;
height: 20px;
display: flex;
border-top-left-radius: 10px;
border: 1px solid red;
.CountDown_p1{
width: 120px;
height: 20px;
line-height: 20px;
text-align: center;
background-color:red;
color: floralwhite;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
font-size: 16px;
font-weight: bold;
}
.CountDown_p2{
width: 190px;
height: 20px;
line-height: 20px;
color: red;
font-size: 14px;
margin-left: 14px;
}
}
</style>
<template>
<div class="CountDown">
<p class="CountDown_p1">活动倒计时:</p>
<p class="CountDown_p2">{{time}}</p>
</div>
</template>
<script>
export default{
data () {
return {
time : '',
flag : false
}
},
mounted () {
//setInterval 开启定时器
let time = setInterval(() => {
if (this.flag == true) {
//clearInterval()方法能够取消setInterval()方法设置的定时器
clearInterval(time);
}
this.countDown();
}, 500);
},
props : {
endTime : {
type: String
}
},
methods : {
//倒计时函数
countDown () {
//剩余时间
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.time = '活动已结束';
}else{
// 需要修改时间样式的话 ,比如需要什么30分钟倒计时,就只保留分和秒
this.time = `${d} 天 ${h} 小时 ${m} 分 ${s} 秒`;
}
},
formate(time) {
if (time >= 10) {
return time;
} else {
return `0${time}`;
}
}
}
}
</script>
✍ 二、页面使用
<template>
<div>
<countdown :endTime='endTime'></countdown>
</div>
</template>
<script>
import countdown from './components/CountDown' // 引入倒计时组件
export default {
components:{
countdown
},
data(){
return{
//剩余时间
endTime : '2022-07-1 11:59:00'
}
}
}
</script>
✍ 三、展示效果
📢博主致谢
非常感谢小伙伴们阅读到结尾,本期的文章就分享到这里,总结了
前端vue倒计时组件【模块化开发】
,希望可以帮到大家,谢谢。
如果你觉得本篇文章有帮助到您,鼓励一下木鱼吧!点击
【关注+点赞+收藏+评论+转发
】支持一下哟
🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕