JavaScript实现倒计时控制按钮的简单方法

作者:纸飞机

时间:2026-10-30

浏览:493

本文介绍如何使用JavaScript实现一个带有倒计时功能的按钮,特别针对disabled属性在span等元素上无效的情况,通过动态修改HTML内容和移除/重置onclick事件来模拟禁用与启用状态。代码展示了如何自动执行倒计时并在结束后恢复按钮的可点击功能,适用于发送激活邮件等场景。

文章目录

HTML结构定义

HTML结构如下:

<a><span id="sendAgain" onclick="sendEmail()">2.再次发送激活邮件</span></a>

需要注意的是,span等元素无法直接使用disabled属性来禁用点击,因此需要通过其他方式控制交互状态。

JavaScript倒计时逻辑

JavaScript实现逻辑如下:


/*发送邮件*/
function sendEmail(){//发送邮箱认证邮件
  var me = $("#sendAgain");
  me.time = 60;
  (function() {
    if (me.time > 1) {
      me.time--;
      me.html("2.再次发送还需(" + me.time + ")");
      setTimeout(arguments.callee, 1000);
      me.attr("onclick","");
    } else {
      me.html("2.再次发送激活邮件");
      me.attr("onclick","sendEmail()");
    }
  })();

}

以上即为JavaScript实现倒计时控制按钮的完整示例,供参考使用。

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章