HTML按钮代码

<a class="btn_my_blue code" style="position: absolute;bottom: 5px;right: 0px;">获取验证码</a>

CSS按钮样式

.btn_my_blue {
	padding: 10px;
	border: 1px solid #fff;
	background-color: #3F51B5;
	border-radius: 15px;
	font-size: 12px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	width: 70px;
	text-align: center;
}

.btn_my_blue.disable {
	opacity: 0.6;
}

初始化JS变量

var time = 60;
var rest = 60;
var timer_id = 0;

监听按钮点击事件

$('.code').click(function() {
    var phone = $('#phone').val();
    if (phone == '') {
        alert('请输入手机号码');
        return false;
    }
    if (!/^1\d{10}$/.test(phone)) {
        alert('手机号码格式不正确');
        return false;
    }
    if ($(this).hasClass('disable')) {
        return false;
    }
    $.post('/verify', {
        phone: $('#phone').val()
    }, function(res) {
        if (res.status == 1) {
            $('.code').addClass('disable').text('剩余' + rest + '秒');
            timer_id = setInterval(function() {
                rest = rest - 1;
                if (rest > 0) {
                    $('.code').text('剩余' + rest + '秒');
                } else {
                    clearInterval(timer_id);
                    rest = time;
                    $('.code').removeClass('disable').text('获取验证码');
                }
            }, 1000);
        } else {
            alert(res.msg);
        }
    })
});