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