手机验证码倒计时组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 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%;
}