js之倒计时读秒

最新推荐文章于 2021-08-10 16:50:43 发布

原创最新推荐文章于 2021-08-10 16:50:43 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jq倒计时读秒

js 同时被 2 个专栏收录

1 篇文章

订阅专栏

jquery

1 篇文章

订阅专栏

本文介绍了一种使用JQuery实现倒计时读秒功能的方法，包括导入JQuery插件、编写HTML标签和JQuery代码。通过设置定时器和正则表达式，实现了对手机号的校验和倒计时功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#导入Jquery插件

<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>

#编写html标签

<input type="text" id="telephone" name="telephone"/>
<input type="text" id="checkcode" name="checkcode"/>
<button id="submit">发送手机验证码</button>

#编写jq代码

<script>	
	//编写入口函数
	$(function(){
		//编写发送验证码单击事件
		$("#btn").click(function(){
			//定义读秒数
			var count=5;
			//编写正则表达式
			var teleReg=/^1[34578]\d{9}$/;
			//获取手机号
			var telephone=$("#telephone").val();
			//并校验手机号是否符合要求
			if(teleReg.test(telephone)){
				//alert("手机号正确！");
				//通过验证,定义定时器
				var timer=setInterval(function(){
					if(count>0){
						//秒数每秒减一
						count--;
						$("#btn").html("正在倒计时第"+count+"秒");
						//倒计时的状态中不能让用户继续点击发送验证码 
						$("#btn").attr("disabled",true);
					}else{
						//清空计时器
						clearInterval(timer);
						//重置数据 ,让按钮处于可点击状态
						$("#btn").attr("disabled",false);
						$("#btn").html("重新发送验证码");
						count=5;
					}				
				},1000);//1000毫秒=1秒					
			}			
		});									
	});		
</script>

以上代码可以完成倒计时读秒功能。