当页面中存在如图所示的多个按钮,通过下列代码可实现点击当前按钮时不影响其他按钮的效果
- html写法如下:
<button type="button" class="btn">获取短信验证码</button>
<button type="button" class="btn">获取短信验证码</button>
- js部分写法如下:
var btns = document.getElementsByClassName('btn');
for(var i = 0;i <= btns.length-1;i++){
btns[i].onclick = function(){
let count = 60;
const countDown = setInterval(() => {
if (count === 0) {
$(this).text('点击重新获取').removeAttr('disabled');
$(this).css({
backgroundColor: '#fff',
color: '#00a0e9',
borderColor:'#00a0e9',
outline:'none'
});
clearInterval(countDown);
} else {
$(this).attr('disabled', true);
$(this).css({
backgroundColor: '#ededed',
color: '#a4a4a4',
borderColor:'#c6c6c6',
outline:'none'
});
$(this).text('(' + count + ')秒后重新获取');
}
count--;
}, 1000)
}
}