`

js jquery 实现点击按钮后,倒计时60秒才能再次点击发送验证邮件

阅读更多

憋死我了。

js jquery 实现点击按钮后,倒计时60秒才能再次点击发送验证邮件

在Spring mvc 中   用 <button class="btn btn-small btn-info btn-block" id="btn" type="button"
                            id="message">获取验证码</button> 

button 不起作用 ,   只能用    <input type="button" id="btn" class="btn btn-small btn-info btn-block" value="免费获取验证码" />

 

 

CSS文件后面的会覆盖前面的:如global.css会覆盖之前的样式表

 

JS文件后面的会引用前面的,如将global.js放在最开始,则会报一个找不到jQuery的错误,因此jQuery这种类库级的文件应该放到最开头。

js文件后面的会引用的前面的所以 自定义的需要放在 后面

 

好了,接下来是实现代码,

 

js:

 

   var wait = 60;
    function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            o.value = "免费获取验证码";
            wait = 60;
        } else {
            o.setAttribute("disabled", true);
            o.value = "重新发送(" + wait + ")";
            wait--;
            setTimeout(function() {
                time(o);
            }, 1000);
        };
    }
    document.getElementById("btn").onclick = function() {
        time(this);
    };

jsp:<input type="button" id="btn" class="btn btn-small btn-info btn-block" value="免费获取验证码" />

 

新手,请大家多多指教

分享到:
评论

相关推荐

    原创jquery实现点击按钮后倒计时效果,防页面刷新!

    3.返回发送状态,如果发送成功,实现等待倒计时,锁定按钮处于禁用状态。 同时把倒计时数据写入 cookie 防止页面被刷新 4.倒计时的实现不采用全局变量,避免污染全局,或被其他函数修改。 5.按钮点击时先判断 ...

    【Jquery经典特效12】jQuery手机发送验证码倒计时代码

    首先,我们需要理解这个特效的核心功能:当用户点击获取验证码的按钮后,按钮会变为不可点击状态,并开始倒计时,通常设定为60秒。在倒计时结束后,按钮恢复原样,用户可以再次发送验证码。这个过程涉及到以下几个...

    jQuery手机号码获取验证码60秒倒计时表单代码

    这个"jQuery手机号码获取验证码60秒倒计时表单代码"提供了一个实用的解决方案,尤其适用于移动端界面,同时也可调整适应电脑端。下面我们将深入探讨这个功能涉及到的关键知识点。 1. **jQuery库**:jQuery是一个...

    jquery验证码倒计时

    通常,点击“获取验证码”按钮后,会发送一个Ajax请求到服务器,服务器生成一个验证码并返回,同时设置一个定时器,在一定时间内(例如60秒)这个验证码有效。客户端则根据返回的验证码显示给用户,并启动倒计时。 ...

    jQuery实现的手机发送验证码倒计时效果源码.zip

    此压缩包"jQuery实现的手机发送验证码倒计时效果源码.zip"显然包含了一个使用jQuery来实现手机验证码发送后倒计时功能的示例代码。 验证码是网络安全中的一个重要组成部分,它常用于验证用户身份,防止恶意机器人或...

    jQuery表单验证与表单美化手机发送验证码倒计时插件

    本文将深入探讨“jQuery表单验证与表单美化手机发送验证码倒计时插件”的相关知识点,帮助你理解如何实现高效且用户友好的网页表单功能。 首先,**jQuery表单验证** 是为了确保用户输入的数据符合预期格式,如电子...

    jQuery手机倒计时验证

    "jQuery手机倒计时验证"是一个常见的功能,用于确保用户在提交表单前进行有效的操作,例如发送短信验证码并等待一定时间才能重新发送。这个功能提高了用户体验,防止了恶意攻击,并确保数据的准确性。 jQuery是一个...

    jquery倒计时短信验证

    本知识点将详细讲解如何利用jQuery实现一个倒计时短信验证功能,这是一种常见的用户验证手段,通常用于提高网站或应用的安全性。 首先,我们需要理解倒计时短信验证的基本流程: 1. 用户输入手机号码。 2. 用户...

    jquery实现手机发送验证码的倒计时代码

    // 将等待时间减1,并在1秒后再次调用time函数,实现倒计时 wait--; setTimeout(function() { time(o, p); }, 1000); } } ``` 这段代码定义了一个名为 `time` 的函数,它会根据传入的参数(按钮对象和提示...

    JQUERY网站手机验证验证码发送特效带倒计时操作功能.zip

    本资源“JQUERY网站手机验证验证码发送特效带倒计时操作功能.zip”提供了一种使用jQuery实现的手机验证码发送与倒计时功能的解决方案,这在移动优先的Web应用中非常常见。 jQuery是一款广泛使用的JavaScript库,它...

    JQUERY短信倒计时 问题:限制次数、

    当用户点击发送短信验证码的按钮后,按钮会进入一个不可点击状态,并开始倒计时,直到倒计时结束才能再次发送验证码。 要实现这个功能,我们需要以下几个步骤: 1. **按钮禁用与启用**: 当用户点击发送短信的...

    基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

    在本文中,我们将探讨如何使用jQuery来实现一个发送短信验证码后的倒计时功能,即使在用户关闭页面后也能继续计时。这个功能对于确保用户在规定时间内完成验证过程至关重要,尤其是在涉及安全敏感操作如账户注册或...

    jQuery手机发送验证码倒计时代码.zip

    它负责监听用户点击“获取验证码”的事件,触发发送验证码的请求,并在发送后立即启动倒计时。JavaScript可以与服务器端进行异步通信(AJAX),发送HTTP请求,获取并处理验证码发送状态的反馈。 最后,jQuery是一个...

    js代码实现点击按钮出现60秒倒计时

    本文将详细介绍如何使用JavaScript实现点击按钮后显示60秒倒计时的功能,常见于手机短信验证或重试操作等场景。 首先,我们来看一个基础的例子。在这个例子中,我们创建了一个HTML按钮元素,并通过JavaScript来控制...

    jquery实现的发送短信验证时间倒计时间隔表格表单特效源码.zip

    该资源是一个基于jQuery实现的发送短信验证功能的时间倒计时特效源码,主要适用于网页中的表单验证场景。在用户请求短信验证码后,通常会有一个等待时间,防止恶意频繁发送,这个等待时间就是通过时间倒计时来显示的...

    JQ实现手机验证码倒计时

    通过这个功能,用户在获取验证码后将无法立即再次发送,而是必须等待一段时间,通常为60秒。 首先,确保在页面中引入了jQuery库,因为整个实现过程依赖于它。这可以通过添加以下代码到HTML文档的`&lt;head&gt;`部分来完成...

    jquery表单中获取短信验证码倒计时

    在jQuery中实现表单中的短信验证码倒计时功能是一项常见的前端交互设计,它增强了用户体验,同时也确保了用户在请求验证码后必须等待一段时间才能再次发送,防止滥用系统资源。以下将详细讲解如何使用jQuery来实现这...

    jQuery实现倒计时功能完整示例

    使用`setTimeout`函数延迟1秒后再次调用`TimeDown`函数,每次减少1000毫秒(1秒)的倒计时值,直到倒计时结束。 ```javascript setTimeout(function () { TimeDown(id, value - 1000); }, 1000); ``` 7. **代码...

Global site tag (gtag.js) - Google Analytics