[JavaScript知识库]前端 短信倒计时 （js实现）

效果：

js实现：

 // 绑定事件方法 sendCode
 <a id="sendCode">发送验证码 </a>
 

<script>
 //在script写方法
 
 
	$(function () {
		//点击触发
		$("#sendCode").click(function () {
			//倒计时
			//hasClass 表示是否有这个样式
			if ($(this).hasClass("disabled")) {
				//正在倒计时中。
			} else {
				//给指定手机号发送验证码
				$.get("/sms/sendcode?phone=" + $("#phoneNum").val(), function (data) {
					if (data.code != 0) {
						alert(data.msg);
					}
				});
				//触发倒计时
				timeoutChangeStyle();
			}
		});
	})
	
	//定义时间60妙
	var num = 60;

	//倒计时功能
	function timeoutChangeStyle() {
		//进入倒计时-给标签增加 disabled 的样式
		$("#sendCode").attr("class", "disabled");
		if (num == 0) {
			$("#sendCode").text("发送验证码");
			//重新赋值60s
			num = 60;
			//移除样式
			$("#sendCode").attr("class", "");
		} else {
			var str = num + "s 后再次发送";
			$("#sendCode").text(str);
			//使用setTimeout定时器。一秒触发一次
			setTimeout("timeoutChangeStyle()", 1000);
		}
		//累减
		num--;
	}
</script>