Jquery实现按钮倒计时

1.关于button按钮：

（1）button跟input不同，<button>比<input>更厉害的地方就在于它可以包含内容。它的值并不是写在value属性里，而是包含在标签中，其value值不会显示在页面上，若通过JS修改Button上显示的值，可以使用text属性修改

$("#btn").text("我要投诉");

 （2） 使用button时，需始终设置type值，因为如果不设置type值，不同浏览器会提交不同的内容

IE提交<button></button>之间的值，其他浏览器提交value值。

（3）可以直接为button添加CSS样式和事件。

2.

<button type="submit" id = "btn" class="countdown" onclick = "change()"></button>

button倒计时前后的样式：

.countdown{
    background-color: #dde2eb;
    border: 1px solid #c9ced8;
    border-radius: 6px;
    width: 335px;
    height: 60px;
    font-size: 20px;
    color: #d84343;
    margin-top: 44px;
}
.complain{
    background-color: #4d77e2;
    border-radius: 6px;
    width: 335px;
    height: 60px;
    font-size: 20px;
    color: #ffffff;
    margin-top: 44px;

}

 

页面加载时就执行倒计时操作

$(document).ready(function () {
        var count = 10;
        var countdown = setInterval(CountDown, 1000);
        function CountDown() {
            $("#btn").attr("disabled", true);
            $("#btn").text("倒计时：" + count + "S");
            if (count == 0) {
                $("#btn").removeAttr("disabled");
                clearInterval(countdown);
                $("#btn").text("我要投诉");
                $("#btn").removeClass("countdown");
                $("#btn").addClass("complain");
            }
            count--;
        }
    })

 

转载于:https://www.cnblogs.com/cyjwdx102355/p/9285244.html