JavaScript实现按钮倒计时10秒后可用的完整代码

作者:交互手记时间:2026-10-29 19:06:03浏览:344

本文介绍了如何使用JavaScript实现按钮在点击后禁用并显示倒计时,10秒后自动恢复可用的功能。通过获取按钮元素、设置disabled属性及利用setTimeout递归调用实现倒计时逻辑,适用于验证码发送等场景。

JavaScript按钮倒计时功能实现

本文通过一个具体示例,详细讲解了如何利用JavaScript实现按钮在点击后进入10秒倒计时,倒计时结束后自动恢复可用的功能。该方案可供开发者参考并应用于实际项目中。


<script language="javascript">
function start()
{
  document.getElementById("Button1").disabled = true;
  document.getElementById("Button1").value = 10;
  window.setTimeout("tick()",1000);
}
function tick()
{
  var time = new Number(document.getElementById("Button1").value);
  if(time>0)
  {
    document.getElementById("Button1").value = time-1;
    window.setTimeout("tick()",1000);
  }
  else
  {
    document.getElementById("Button1").disabled = false;
    document.getElementById("Button1").value = "保存";
  }
}
</script>
<form>
<INPUT TYPE="button" NAME="Button1" id="Button1">
</form>
<script language=javascript>
 start();
</script>

希望上述关于JavaScript程序设计的介绍与代码示例,能对各位开发者在处理类似交互需求时提供有效的帮助。

作者最新文章