存在多个按钮时,实现点击当前按钮其余按钮不被影响的效果

当页面中存在如图所示的多个按钮,通过下列代码可实现点击当前按钮时不影响其他按钮的效果
在这里插入图片描述

  1. html写法如下:
<button type="button" class="btn">获取短信验证码</button>
<button type="button" class="btn">获取短信验证码</button>
  1. 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)
			}
		}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值