验证中...
片段 1 片段 2
index.html
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js实现点击按钮后延长倒计时时间</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
.btn_box {
text-align: center;
margin-top: 100px;
}
button {
border: 0;
outline: 0;
background-color: #ccc;
padding: 10px;
}
#timeEle {
margin-top: 100px;
text-align: center;
font-size: 30px;
font-weight: 600;
}
</style>
</head>
<body>
<div class="btn_box">
<button onclick="timeDown.buyVIP(5)">购买会员5秒</button>
<button onclick="timeDown.buyVIP(10)">购买会员10秒</button>
</div>
<p id="timeEle"></p>
<script>
// 一天有24小时,1440分钟,86400秒。
// 点击购买会员的时候及时增加时间
class TimeDown{
/** 倒计时
* timeEle (String) // 显示倒计时标签选择器
* sumSecond (number) // 倒计时总秒数
*/
constructor(timeEle,sumSecond=0) {
this.timeEle = document.querySelector(timeEle); // 存放倒计时的标签
this.sumSecond = sumSecond; // 总秒数
this.init();
}
// 初始化倒计时
init(){
this.goTime = setInterval(()=> this.countDown(),1000) // 执行倒计时定时器
}
// 补0函数
add0(m) {
return m < 10 ? "0" + m : m;
}
// 倒计时逻辑
countDown() {
--this.sumSecond;
if(this.sumSecond < 1){
//倒计时结束后记着清除一下计时器
clearInterval(this.goTime);
this.timeEle.innerText = '倒计时已结束';
return false;
}
console.log(this.sumSecond)
this.timeEle.innerText = this.timeFormat()
}
/** 延长倒计时方法
* addSecond (number) 需要添加的秒数
*/
buyVIP(addSecond) {
this.sumSecond += addSecond; // 在总秒数的基础上添加秒
// 当倒计时结束后点击添加时间按钮需要重新初始化一下计时器
if(this.sumSecond === addSecond) this.init();
this.timeEle.innerText = this.timeFormat()
}
// 生成倒计时值
timeFormat() {
let hour, minute, second, timeText;
hour = Math.floor(this.sumSecond / (60 * 60));
minute = Math.floor(this.sumSecond / 60) - (hour * 60);
second = Math.floor(this.sumSecond ) - (hour * 60 * 60) - (minute * 60);
timeText = this.add0(hour) + ':' + this.add0(minute) + ':' + this.add0(second)
return timeText
}
}
let timeDown = new TimeDown('#timeEle',10)
</script>
</body>
</html>
效果展示.gif

评论列表( 1 )

1329024_hjm100
鸿基梦 2018-10-16 15:42

你可以在登录后,发表评论

搜索帮助

12_float_left_people 12_float_left_close