js中倒计时_js倒计时特效

js中倒计时_js倒计时特效利用setInterval制作简单的js倒计时,点击按钮将触发定时器且按钮不可用html:获取校验码JS: vari; functiongetCode(){ $(“#code”).attr({“disabled”:”disabled”}); i=self.setInterval(“countdown()”,1000); } varint=1

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

利用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.net/185954.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • loadrunner server压力测试 sql_LoadRunner压力测试实例.pdf[通俗易懂]

    loadrunner server压力测试 sql_LoadRunner压力测试实例.pdf[通俗易懂]论坛测试资源交流区专用LoadRunner压力测试实例摘要:本文通过实例讲解介绍了LoadRunner工具的使用,介于公司的实际情况,文中主要是对工具的基本使用做了详细描述,高级运用方面除性能计数器与参数设置外其它均未涉及,待以后补充。目的是使公司人员根据该手册便可以独立运用Loadrunner进行压力测试主题词:Loadrunner工具压力测试1LoadRunne…

    2022年7月18日
    16
  • Wireshark抓包详解[通俗易懂]

    Wireshark抓包详解[通俗易懂]简述wireshark是非常流行的网络封包分析工具,功能十分强大。可以截取各种网络封包,显示网络封包的详细信息。使用wireshark的人必须了解网络协议,否则就看不懂wireshark了。为了安全考虑,wireshark只能查看封包,而不能修改封包的内容,或者发送封包。 wireshark能获取HTTP,也能获取HTTPS,但是不能解密HTTPS,所以wireshar

    2022年9月6日
    3
  • ibatis动态传入表名造成的SQL注入的解决方案(摘录的)

    ibatis动态传入表名造成的SQL注入的解决方案(摘录的)

    2021年8月26日
    52
  • 地形——高度图

    地形——高度图在游戏中,我们将采用高度图来模拟现实生活中的丘陵和山谷。高度图其实就是一个数组,而该数组的每个元素都指定了地形方格中某一个顶点的高度值。线框模式普通地形模式在高度图中,通常为其每一个元素只分配一个字节的存储空间,以至于高度能在区间[0,255]内取值。但在实际应用中,为了匹配3D世界的尺度,可能要对高度值进行比例变换,就很可能超出上述区间范围。因此,可以分配一个整型或浮点型数组来存储这些高…

    2022年5月9日
    97
  • CentOS:安装ssh

    CentOS:安装ssh

    2021年6月18日
    82
  • idea激活码2019版激活方式实测可用

    今天来更新一下2019版本的idea激活方式。

    2022年3月14日
    72

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号