zl程序教程

您现在的位置是:首页 >  后端

当前栏目

js中倒计时_js倒计时特效

JS 特效 倒计时
2023-06-13 09:14:48 时间

大家好,又见面了,我是你们的朋友全栈君。

利用setInterval制作简单的js倒计时,点击按钮将触发定时器且按钮不可用

html:

<button id="code" class="btn btn-default" οnclick="getCode();">获取校验码</button>

JS:

<script type="text/javascript">
  	var i;
  	function getCode(){
  		$("#code").attr({"disabled":"disabled"});
  		i = self.setInterval("countdown()", 1000);
  	}

  	var int = 10
	function countdown() {
		document.getElementById("code").innerHTML = int + "秒后重新发送";
		int--;
		if(int<0){
			i=window.clearInterval(i)//结束
			int = 10; //重新赋值
			$("#code").removeAttr("disabled").html("重新获取校验码");//将按钮可用
		}
	}
	
</script>

效果演示

作者:itmyhome

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/185954.html原文链接:https://javaforall.cn