发布时间:
来源:CSDN
(资料图)
今天遇到了disabled的一个练习,按照记忆试了一下,运行不出来,搜了半天才搜到可以解决我问题的信息,基于在很多人转载别人的博客,也没有解释,让初学者摸不到头脑,我就来把复杂的内容简单化,废话不多说,直接看:
disabled有两个属性,true 和false true:禁用 false :解除禁用,具体例子可以看下面的代码
disabled简单来说就是禁用,什么意思呢,我举个例子就很容易明白,比如你注册一个app需要填写手机号,app会给你的手机发一条验证码,然后你输入验证码才可以注册,这个时候你点击发送验证码后,发送验证码的按钮会变成灰色,并且提示你60秒后可再次发送,disabled就是这个作用,下面看代码。
var btn = document.querySelector("button"); var span = document.querySelector("span"); btn.onclick = function(){//禁用按钮3秒 this.disabled = true setTimeout(function(){this.disabled = false }.bind(this),3000) //在禁用按钮的同时,出现文字说明 var num = 3 var timer = setInterval(function(){span.innerHTML = num-- +"秒后可重新发送" if(num == -1){clearInterval(timer) span.innerHTML = "" } },1000) //下面html内容就一个btn按钮和一个span就不多写了 }
这是点击按钮后的效果,3秒后可以继续点击
我之所以写这个博客,完全是因为,我需要查找一些信息时,经常会看到一些人的博客,内容晦涩,就是搞出很长的类名或者函数名,需要花额外的时间才能看懂,所有人的时间都很宝贵,何必不直接把大部分名称简化为a,b,c这种简单又让人容易看的透彻的呢,本来就是分享向的博客,结果让人家看不懂,或者看的头痛,那不是得不偿失么。
内容随时更新,欢迎补充