精华内容
下载资源
问答
  • 60; if (!this.timer) { this.count = TIME_COUNT; this.show = false; this.timer = setInterval(() => { if (this.count > 0 && this.count <= TIME_COUNT) { this....
  • JavaScript网页制作–10后再次获取验证码,供大家参考,具体内容如下 通常在注册或者登陆页面时,都会需要短信验证码,在点击按钮获取验证码后会有一段时间无法点击按钮,避免短时间内大量的获取验证码。今天制作...
  • 本文主要介绍了js实现简单的获取验证码按钮加效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
  • 主要介绍了js实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文。
  • function checkPhone(){ ... o.value="重新获取"; wait = 60; } else { o.setAttribute("disabled", true); o.value="重新发送(" + wait + ")"; wait--; setTimeout(function() { time(o) }, 1000) } }
  • 本文主要介绍了关于Angular.js实现获取验证码倒计时60秒按钮的相关内容,关于这个功能相信不用多介绍,大家都不陌生,所以下面话不多说了,来一起看看实现的方法吧。 一、controller中代码 angular.module('...
  • 主要介绍了JS 实现获取验证码 倒计时功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 通过jquery.cookie.js插件可以快速实现“点击获取验证码60秒内禁止重新获取(防刷新)”的功能 效果图: 先到官网(http://plugins.jquery.com/cookie/)下载cookie插件,放到相应文件夹,代码如下: 代码如下: ...
  • js实现 获取验证码

    千次阅读 2019-08-09 20:50:55
    发送验证码 < / button > < script > var input = document . querySelector ( 'input' ) ; var button = document . querySelector ( 'button' ) ; var count = 10 ; button . onclick =...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <input type="text"><button>发送验证码</button>
        <script>
        var input = document.querySelector('input');
        var button = document.querySelector('button');
        var count = 10;
        button.onclick = function(){
            var This = this;
            this.disabled = true;
            this.innerHTML = count + 's';
            var timer = setInterval(function(){
                count--;   
                if(count===-1){
                    clearInterval(timer);
                    This.disabled = false;
                    This.innerHTML = '发送验证码';
                    count = 10;
                }
                else{
                    This.innerHTML = count + 's';
                }
            },1000);
        };
        </script>
    </body>
    </html>
    
    展开全文
  • 转自:jQuery插件实现“点击获取验证码60秒内禁止重新获取(防刷新)” 效果图 先到官网(http://plugins.jquery.com/)下载jquery.cookie.js插件,放到相应文件夹,代码如下: html> head> meta ...

    转自:jQuery插件实现“点击获取验证码后60秒内禁止重新获取(防刷新)”


    效果图
    这里写图片描述

    先到官网(http://plugins.jquery.com/)下载jquery.cookie.js插件,放到相应文件夹,代码如下:

    <code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE html></span>
    <span class="hljs-tag"><<span class="hljs-title">html</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"X-UA-Compatible"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"IE=edge,chrome=1"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">title</span>></span>Examples<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"description"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">""</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"keywords"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">""</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/jquery.min.js"</span> ></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/jquery.cookie.js"</span> ></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
            * <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">font-family</span>:<span class="hljs-value"> <span class="hljs-string">"Microsoft Yahei"</span></span></span>;<span class="hljs-rule">}</span></span>
            <span class="hljs-class">.captcha-box</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">360</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">34</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">30</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">30</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#956E6F</span> <span class="hljs-number">1</span>px dashed</span></span>; <span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"> <span class="hljs-number">5</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#FAF2F2</span></span></span>;<span class="hljs-rule">}</span></span>
            <span class="hljs-id">#mobile</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value"> left</span></span>; <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">180</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">32</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#e5e5e5</span> <span class="hljs-number">1</span>px solid</span></span>; <span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">32</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">text-indent</span>:<span class="hljs-value"> <span class="hljs-number">8</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">outline</span>:<span class="hljs-value"> none</span></span>;<span class="hljs-rule">}</span></span>
            <span class="hljs-id">#getting</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value"> left</span></span>; <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">34</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> -<span class="hljs-number">1</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">0</span> <span class="hljs-number">18</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;  <span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">34</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#e5e5e5</span> <span class="hljs-number">1</span>px solid</span></span>; <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-function">linear-gradient(<span class="hljs-number">0</span>deg, #f4f2f2 <span class="hljs-number">0</span>%,#fbf9f9 <span class="hljs-number">100</span>%)</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">cursor</span>:<span class="hljs-value"> pointer</span></span>; <span class="hljs-rule"><span class="hljs-attribute">outline</span>:<span class="hljs-value"> none</span></span>;<span class="hljs-rule">}</span></span>
        </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
            $(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
    
                <span class="hljs-comment">/*防刷新:检测是否存在cookie*/</span>
                <span class="hljs-keyword">if</span>($.cookie(<span class="hljs-string">"captcha"</span>)){
                    <span class="hljs-keyword">var</span> count = $.cookie(<span class="hljs-string">"captcha"</span>);
                    <span class="hljs-keyword">var</span> btn = $(<span class="hljs-string">'#getting'</span>);
                    btn.val(count+<span class="hljs-string">'秒后可重新获取'</span>).attr(<span class="hljs-string">'disabled'</span>,<span class="hljs-literal">true</span>).css(<span class="hljs-string">'cursor'</span>,<span class="hljs-string">'not-allowed'</span>);
                    <span class="hljs-keyword">var</span> resend = setInterval(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
                        count--;
                        <span class="hljs-keyword">if</span> (count > <span class="hljs-number">0</span>){
                            btn.val(count+<span class="hljs-string">'秒后可重新获取'</span>).attr(<span class="hljs-string">'disabled'</span>,<span class="hljs-literal">true</span>).css(<span class="hljs-string">'cursor'</span>,<span class="hljs-string">'not-allowed'</span>);
                            $.cookie(<span class="hljs-string">"captcha"</span>, count, {path: <span class="hljs-string">'/'</span>, expires: (<span class="hljs-number">1</span>/<span class="hljs-number">86400</span>)*count});
                        }<span class="hljs-keyword">else</span> {
                            clearInterval(resend);
                            btn.val(<span class="hljs-string">"获取验证码"</span>).removeClass(<span class="hljs-string">'disabled'</span>).removeAttr(<span class="hljs-string">'disabled style'</span>);
                        }
                    }, <span class="hljs-number">1000</span>);
                }
    
                <span class="hljs-comment">/*点击改变按钮状态,已经简略掉ajax发送短信验证的代码*/</span>
                $(<span class="hljs-string">'#getting'</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
                    <span class="hljs-keyword">var</span> btn = $(<span class="hljs-keyword">this</span>);
                    <span class="hljs-keyword">var</span> count = <span class="hljs-number">60</span>;
                    <span class="hljs-keyword">var</span> resend = setInterval(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
                        count--;
                        <span class="hljs-keyword">if</span> (count > <span class="hljs-number">0</span>){
                            btn.val(count+<span class="hljs-string">"秒后可重新获取"</span>);
                            $.cookie(<span class="hljs-string">"captcha"</span>, count, {path: <span class="hljs-string">'/'</span>, expires: (<span class="hljs-number">1</span>/<span class="hljs-number">86400</span>)*count});
                        }<span class="hljs-keyword">else</span> {
                            clearInterval(resend);
                            btn.val(<span class="hljs-string">"获取验证码"</span>).removeAttr(<span class="hljs-string">'disabled style'</span>);
                        }
                    }, <span class="hljs-number">1000</span>);
                    btn.attr(<span class="hljs-string">'disabled'</span>,<span class="hljs-literal">true</span>).css(<span class="hljs-string">'cursor'</span>,<span class="hljs-string">'not-allowed'</span>);
                });
    
            });
    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"captcha-box"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"mobile"</span> <span class="hljs-attribute">maxlength</span>=<span class="hljs-value">"11"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"请输入手机号码"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"getting"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"获取验证码"</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">html</span>></span></code>
    展开全文
  • JS代码 function sendCode(btn){ //获取手机号 var phoneNum =document.getElementById("phoneId").value; //后台Ajax请求 $.ajax({ type:"post", url: "/toregister/send", data: {phone: phoneNum}, ...

    JS代码

    function sendCode(btn){
    		//获取手机号
            var phoneNum =document.getElementById("phoneId").value;
            //后台Ajax请求
            $.ajax({
                type:"post",
                url: "/toregister/send",
                data: {phone: phoneNum},
                success: function(json){
                    //console.log(json);
                    alert("获取验证码成功");
                }
            });
            time(btn);
        }
    
        //等待时间(测试时间为10秒)
        var wait = 10;
        function time(btn) {
            if (wait == 0) {
                btn.removeAttribute("disabled");
                btn.innerHTML = "免费获取验证码";
                wait = 10;
            } else {
                btn.setAttribute("disabled", true);
                btn.innerHTML = wait + "秒后重新获取验证码";
                console.log(wait + "秒后重新获取验证码");
                wait--;
                setTimeout(function () {
                        time(btn);
                    },
                    1000)
            }
        }
    

    按钮

    //οnclick="sendCode(this),传入按钮自身对象this
    <button id="getCode" class="btn-primary"onclick="sendCode(this)">发送短信验证码</button>
    
    展开全文
  • 应用场景:点击按钮,获取验证码,倒计时60秒 【html】 <a id="sendVertifyCode" style="width:100px;float: right;color:red;height: 30px;line-height: 30px;">获取验证码</a> <label id=...
    应用场景:点击按钮,获取验证码,倒计时60秒
    

    【html】

    <a id="sendVertifyCode" style="width:100px;float: right;color:red;height: 30px;line-height: 30px;">获取验证码</a>
    <label id="codeMsg" style="width:100px;float: right;color:red;height: 30px;line-height: 30px;display: none;">还剩60秒</label>
    
    var t=59;
    var inter = setInterval(function(){
        $("#codeMsg").html("还剩"+t+"秒");
        if(t <= 0) {
            clearInterval(inter);
            //隐藏标签
            $("#sendVertifyCode").css("display","block");
            //倒计时
            $("#codeMsg").css("display","none");
        }
        t--;
    }, 1000);
    展开全文
  • 简单实现js获取验证码

    千次阅读 2020-05-26 11:31:40
    倒计时获取验证码,设定时间内不可重复点击获取 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src=...
  • js实现验证码获取倒计时60秒

    千次阅读 2018-08-07 11:55:21
    &lt;input id="btn" type="...免费获取验证码"/&gt; js: &lt;script type="text/javascript"&gt; var wait=60; function time(o) { if (wait ==
  • 效果如下:(嘘,页面写的有点简陋,看效果!) ...<!--手机号输入框--> <div class="login_box">...input type="number" placeholder="请输入手机号" class="phoneInput" v-model="mobile...获取验证码</sp
  • js实现获取验证码

    2019-09-15 11:01:05
    obj.value="获取验证码"; countdown = 60; return; } else { obj.setAttribute("disabled", true); obj.value="重新发送(" + countdown + ")"; countdown--; } setTimeout(function() { settime(obj) } ,...
  • 在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时。该如何实现获取验证码倒计时功能呢?下面小编给大家分享JS实现用户注册时获取短信验证码和倒计时的代码,一起看看吧
  • 主要介绍了JS/jQ实现免费获取手机验证码倒计时效果的相关资料,通过定义两个接口,发送验证请求和返回数据验证手机号和验证是否一致,后台根据接口去实现,需要的朋友可以参考下
  • 本文通过实例代码给大家介绍了AngularJS 实现点击按钮获取验证码功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,527
精华内容 9,810
关键字:

js实现60秒获取验证码