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

作者:交互手记

时间:2026-10-29

浏览:343

本文介绍了如何使用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程序设计的介绍与代码示例,能对各位开发者在处理类似交互需求时提供有效的帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章