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程序设计的介绍与代码示例,能对各位开发者在处理类似交互需求时提供有效的帮助。
作者最新文章
JS怎么实现页面强制刷新
2026-11-05 14:53:38
点击JS链接直接运行不下载?前端实现.js文件强制下载的三种方法
2026-11-05 12:12:23
怎么封装一个通用的JS创建元素辅助函数
2026-11-05 11:41:41
Swiper.js 怎么监听滑动结束并获取当前索引
2026-11-05 10:57:15
HTML、CSS和JS的关系:Web前端三件套怎么协作
2026-11-04 15:41:40
