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--; } })