设置button自定义时间内不可以重复点击

何处锦绣不灰堆

发布于 2020-05-29 11:52:46

1.5K0

发布于 2020-05-29 11:52:46

文章被收录于专栏：农历七月廿一

做页面的时候，会遇到很多的小问题，其实说白了都是为了用户体验，谁让我们是前端呢是吧，最近我遇到的一个小问题是怎么让button按钮给用户点击一次之后一定时间内部可以重复点击的这样一个小需求，为了是不让用户疯狂点击造成数据库受不了的情况，效果很简单：

点击以后这个按钮就是变成了不可点击的状态，其实原理很简单，就是监听一下点击的时间，看看是不是点击过了，如果是，设置一个时间，然后将按钮的状态改为disable就可以了（没有例子费什么话），好的写一个小例子：

	<body>
		<button οnclick="textlengh()" id="btn">点击测试</button>
	</body>

画一个button，结束以后写js函数：

function textlengh(){//点击的按钮调用的是这个函数
			var btn = document.getElementById('btn');//首先需要获取的是哪一个按钮的id
			btn.disabled = 'disabled';//只要点击就将按钮的可点击的状态更改为不可以点击的状态
			setTimeout(function(){//设置时间，多久可以改变状态为可以点击
				btn.disabled = '';
			},6000);//6秒内不可以重复点击，一秒等于1000毫秒
			
			//这是另外一种写法，原理是一样的，只是点击的事件控制权的问题
		/*	btn.onclick = function() {
			this.disabled = 'disabled';
			setTimeout(function() {
			btn.disabled = '';
			}, 5000);//5秒内不可以重复点击
			};*/
			alert("不可以再点击了！")
			}

ok，可以直接拿去运行，不需要什么js的引入，是的，就是那么简单，因为需求本来就简单（看不起谁呢？简单不需要写啊）。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018/03/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

button