常见效果整理——移动端获取验证码倒计时

一、点击button，执行倒计时方法

    $('.gold-sun-vecode-btn').click(function(){
        time(60, $(this))
        prompt('验证码已发送')
        $(this).off('click')
    })
    // 发送验证码倒计时
function time(wait, o) {
    if (wait == 0) {
        wait = 60
        o.text("重新获取校验码");
        o.on('click', function() {
            time(wait, $(this));
            $(this).off('click');
        });
    } else {
        o.text("等待" + wait + "秒");
        wait--;
        setTimeout(function() {
            time(wait, o);
        },1000)
    }
}

二、弹出一个提示框，提示验证码已发送

function prompt(msg) {
    $('body').append('
' + msg + '
');
    setTimeout(function() {
        $('body').find('.prompt').fadeOut(1000);
        setTimeout(function() {
            $('body').find('.prompt').remove();
        }, 1000);
    }, 500);
}

.prompt { z-index:500; position: fixed; padding: 0.2em 0.8rem; background-color: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.44rem; border-radius: 3px; top: 10.4rem; left: 50%; -webkit-transform: translate(-50%, -50%); }