显示渲染：

在WEB开发中，倒计时经常被用来限制用户对表单的操作。例如，期望用户在允许他们继续下一个操作之前，在一定时间内读取相关的协议信息。比如接收手机验证码时，允许用户在一定时间后再次获取验证码(不接收验证码)。所以今天，我将告诉你如何使用Javascript来实现这个简单的应用程序。

查看演示下载源代码

应用场景1:用户注册时，只有读取相关协议信息后才能激活按钮

一些网站要求用户在注册时同意所谓的用户协议等信息。如果协议内容非常重要，有些网站会要求新注册用户阅读相关协议信息后，再激活“下一步”按钮提交表单。为了让用户阅读协议信息(我们不知道实际用户是否真的阅读了)，开发者会设计一个倒计时，比如30秒，之后表单提交按钮会被激活并生效。让我们看看如何实现它。

form action='//www . JB 51 . net/' method=' post ' name=' agree ' input type=' submit ' class=' button ' value='请仔细查看服务条款和条件以及statement ()' name=' agree'/form，假设上面有这样的表单，那么表单的其他部分就省略了，只有一个submit按钮。最初，该按钮不可用。30秒倒计时结束后，按钮会显示“我同意”，点击即可激活。

我们使用本机js来实现这一效果：

脚本var secs=；document . agreeb . disabled=true；对于(var I=；I=秒；I){ window . settimeout(' update(' I ')'，I *)；}函数更新(num) {if (num==secs) {document。同意。同意。价值=“我同意”；document . agreeb . disabled=false；} else { var printnr=secs-num；document . agreeb . value='请仔细阅读服务条款和条件(' prinnr ')'；} }/脚本我们将时间设置为30秒。当然也可以设置自己想要的时间，禁用按钮，即不能点击，然后循环30秒，通过window.setTimeout调用update()函数，将当前秒与倒计时进行比较，倒计时完成显示“我同意”，激活按钮。

应用场景二：用户激活短信通道，向用户手机发送验证码消息，验证身份

很多网站在验证用户身份时需要提高用户信息的安全性，会绑定到用户的手机上，然后将验证码信息发送到用户的手机上。如果用户填写正确的验证码并提交给后台，操作将会成功。但是，发送验证码可能因为各种原因不成功，用户不能一直点击发送。就这样，开发者用倒计时来处理这样的问题。用户激活短信后，如果30秒后没有收到验证码短信，可以点击再次发送短信。

formaction='//www.jb51.net/'方法=' post ' name=' my form ' input type=' button ' class=' button ' value='获取手机验证码' name=' phone ' onclick=' show time()'/上面的表单向按钮添加了onclick事件

脚本函数show time(t){ document . my form . phone . disabled=true；for(I=；I=t；I){ window . settimeout(' update _ p(' I '，' t ')，I *)；}}函数update _ p (num，t){ if(num==t){ document . my form . phone . value=' resend '；document . my form . phone . disabled=false；} else { printnr=t-num；document . my form . phone . value='(' printnr ')秒后再次发送；} }/脚本与场景1相同，点击按钮时按钮状态为禁用，通过调用window.setTimeout的update_p()显示倒计时，倒计时完成后按钮显示“重发”，这时按钮状态为可用。

以上两个场景说明，按钮只有在js实现自动倒计时30秒后才能使用，希望对大家有所帮助。