~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术:VS   MVC

作者:袁志彤

撰写时间:2019-05-16

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

我写这个完全是因为项目中会用到这个,我先写着练练手,项目用用到的是手机获取验证码,当点击获取验证码的时候,按钮要禁用,按钮中的文字变成一个一分钟的倒计时,倒计时结束再次启用,文字恢复。

 

首先,我用到了一个文本框,它的type类型是按钮类型,我用了layui的框架,因为我觉得layui的框架好看,还必须给它个id

 

按钮禁用与倒计时

用按钮应该也可以,你们可以自己试一下

 

按钮禁用与倒计时

这就是按钮的样式了,这里就要说一下了,按钮有个属性是禁用disabled,按钮加上这个属性就禁用,别看我用的是input标签,但类型改了之后就是一个按钮了

 

按钮禁用与倒计时

 

按钮禁用与倒计时

现在我要把禁用和倒计时结合起来,让它点击后禁用,然后在倒计时结束后启用

按钮禁用与倒计时

 

倒计时多少秒是可以设置的,想要多少秒就把count的只改成多少,我用10s,因为我不想等那么久,因为我用了layui框架,所以禁用属性就是layui-btn-disabled,在这里面还用到了计时器,间隔计时器,addclass是添加一个类,removeclass是移除一个类型,在它点击是要把禁用属性加上,及时结束后要把禁用属性移除

 

按钮禁用与倒计时

相关文章: