您的当前位置:首页>新品 > 正文

天天快报!disable怎么运用?disable简单易理解用法

来源:CSDN 时间:2022-12-08 10:34:35


(资料图)

今天遇到了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这种简单又让人容易看的透彻的呢,本来就是分享向的博客,结果让人家看不懂,或者看的头痛,那不是得不偿失么。

内容随时更新,欢迎补充

标签:

最新新闻:

新闻放送
Top