版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/susuzhe123/article/details/79772574
function Countdown(ele){
this.dom = document.getElementById(ele);
this.getBtn = this.dom.getElementsByClassName('get_code');
this.showTime = this.dom.getElementsByClassName('show_time');
this.countdown = 60;
this.init();
}
Countdown.prototype = {
init:function() {
this.settime()
},
settime:function() {
var that = this;
if (that.countdown == 0) {
$(that.getBtn).show();
$(that.showTime).hide();
that.countdown = 60;
return;
} else {
$(that.getBtn).hide();
$(that.showTime).show().html('剩余'+that.countdown+'s');
that.countdown--;
}
setTimeout(function(){
that.settime()}
,1000)
}
}
<p class="yzm_p" id="yzm5"><span class="get_code">获取验证码</span>
<span class="show_time">剩余59s</span> </p>
.yzm_p{
position: absolute;
right: .5rem;
top:.3rem;
line-height: 1;
}
.yzm_p .get_code{
display: block;
width: 2.44rem;
height: .77rem;
border: 1px solid #ff4400;
color: #ff4400;
line-height: .78rem;
font-size: .34rem;
text-align: center;
-webkit-border-radius:5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.show_time{
line-height: .7rem;
color: #999;
display: none;
font-size: .34rem;
}
.tixian .mui-btn-orange {
background: #ff6000;
color: #fff;
border: none;
height: 1.28rem;
font-size: .44rem;
width: 100%;
}