PROMULGATOR

    snow

    北京市中国北京研究院
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <div class="m_xchunk">
        <div class="row">
            <span>验证码</span>
            <div class="right fix">
                <div class="code">
                    <input type="button" value="获取验证码" class="J_code">
                </div>
                <div class="input">
                    <input type="text" placeholder="请输入验证码" class="text">
                </div>
            </div>
        </div>
    </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.m_xback {
    background:#fff;
    font-family:"Microsoft YaHei","微软雅黑",Helvetica,"黑体",Arial,Tahoma;
}
input,textarea {
    webkit-box-sizing:border-box;
    box-sizing:border-box;
        outline: none;
}
/* m_xchunk */
.m_xchunk {
    font-size:16px;
    width:500px;
    margin:0 auto;
}
.m_xchunk .row {
    border-bottom:1px solid #e6e6e6;
    padding:6px 0 6px 12px;
}
.m_xchunk .row span {
    width:70px;
    float:left;
    height:44px;
    color:#666;
    line-height:44px;
}
.m_xchunk .row .right input.text {
    height:44px;
    line-height:44px;
    color:#4a4a4a;
    border:none;
    width:100%;
    font-size:16px;
}
.m_xchunk .row .right input::-webkit-input-placeholder {
    color:#b1b1b1;
}
.m_xchunk .row .right {
    border-bottom:none;
    margin-left:70px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
(function(window, undefined) {
    var $win = $(window),
        $doc = $(document),
        Fn = function() {},
        init = {};
    /**************************** BEGIN ****************************/
    /**
     * 填写报名
     * @method init.makeout
     * @since 1.0
     * @return {none}
     */
    init.makeout = function() {
        $doc.on('click', '.J_code', function() { // 获取验证码
            var $this = $(this),
                _this = this,
                i = 60;
            _this.disabled = 'disabled';
            clearInterval(repeat);
            var repeat = setInterval(function() {
                i--;
                if (i == 0) {
                    _this.disabled = false;
                    $this.removeClass('gray').val('获取');
                    clearInterval(repeat);
                } else {
                    $this.addClass('gray').val(i);
                }
            }, 1000);
        });
    }
    /**************************** END ****************************/
    $.each(init, function() {
        typeof this === 'function' && this();
    });
})(window);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.8.3
 立即下载

验证码倒计时

点击按钮是  按钮禁用  开启倒计时  倒计时结束后解开按钮禁用  适用于手机和pc

0