JQuery实现倒计时按钮、一个简单的倒计时验证按钮、适用于短信倒计时按钮

对于一些有短信验证的网站来说，倒计时按钮是必不可少的，而且也需要我们来防止一些低级的刷短信的恶意行为，这次我花费了一些时间来写了一个倒计时和开关的双保险倒计时短信验证按钮。

本倒计时短信验证按钮的时间大家可以随意设置，样式比较单一，布局方面使用了虽简单的方法，在这里也充分考虑了那些不会jq的人的感受，代码还是存在一些吐槽点的，有什么需要改进的地方可以提出来，如果我这边有了时间会改进的。

JQ代码使用了jquery-1.12版本，感觉2.X和3.X版本没啥不兼容，感兴趣的同学可以测试一下。

下面的图是短信验证按钮的点击前和点击后的样式截图

一、HTML部分

<div class="cgl_djs">
    <button>获取短信验证码</button>
    <em><span></span>秒后可再次获取</em>
</div>
<!-- 
cgl_djs -- 大的容器 
button  -- 点击的按钮 
em      -- 隐藏的按钮，不可点击的 
span    -- 显示倒计时数字的容器 
-->

二、CSS样式部分

<style type="text/css">
    .cgl_djs{
        width:150px;
        margin:0 auto;
        text-align:center;
    }
    .cgl_djs button{
        display:block;
        background:#993300;
        color:#fff;
        font-size:14px;
        border:none;
        cursor:pointer;
    }
    .cgl_djs em{
        display:none;
        height:40px;
        font-size:16px;
        color:#fff;
        background:#999;
    }
    .cgl_djs button,
    .cgl_djs em{
        border-radius:15px;
        height:40px;
        line-height:40px;
        width:100%;
    }
</style>

JQuery代码部分

<script type="text/javascript">
    //倒计时按钮
    (function ($) {
        //倒计时定义部分开始
        var js_djs_num = 8; //需要的时间
        var js_djs_obj = js_djs_num; //初试时间
        var $cgl_djs_btn = $('.cgl_djs button');//点击按钮
        var $cgl_djs_nob = $('.cgl_djs span');//时间容器
        var $cgl_djs_hide = $('.cgl_djs em');//隐藏按钮
        var cgl_on_off = true;//做一个开关
        //倒计时主题部分开始
        $cgl_djs_btn.click(function () {
            if (cgl_on_off) {
                cgl_on_off = false;//开关关闭
                $(this).hide();//点击隐藏本身
                $cgl_djs_nob.html(js_djs_num);//初始时间,要不然会有bug
                if (js_djs_obj == 0 || js_djs_obj == js_djs_num) {
                    $cgl_djs_hide.css('display', 'block');//倒计时box显示出来
                    js_djs_obj = js_djs_num;//时间计算
                    var cgl_times = setInterval(function () {
                        if (js_djs_obj > 0 && js_djs_obj != 0) {
                            js_djs_obj--;//减少数字
                            $cgl_djs_nob.html(js_djs_obj);//显示数字时间
                        } else if (js_djs_obj == 0) {
                            $cgl_djs_hide.hide();//倒计时box隐藏
                            $cgl_djs_btn.show();//点击按钮显示出来
                            clearInterval(cgl_times);//清除倒计时
                            cgl_on_off = true;//开关开启
                        }
                    }, 1000);
                }
            }
        });
    })(jQuery);
</script>

现在你可以在自己的网站上使用倒计时短信按钮了，其实实现这个还是很容易的，但是在实际的开发中难免时间不够或者脑路不同的时候，希望大家使用倒计时按钮的时候不要出现BUG。

PS：如果想要把安全性再提高一点还需要后端的朋友们在服务器上做一个倒计时的程序跟前端进行配合哦。