获取短信验证码倒计时，非常简单

最新推荐文章于 2024-05-22 10:11:16 发布

攻城狮YanGo

最新推荐文章于 2024-05-22 10:11:16 发布

阅读量1.4w

点赞数 2

分类专栏： web前端 demo jquery 文章标签： jquery 倒计时

本文链接：https://blog.csdn.net/weixin_39644462/article/details/80372290

版权

web前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

demo

8 篇文章 0 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

<!doctype html>

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name='viewport' content='width=device-width,minimum-scale=1.0 maximum-scale=1.0 user-scalable=no' />
	<title>获取短信验证码倒计时</title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style type="text/css">

		.btn { 
		    border: 0;
		    width:120px;
		    height:40px;  
		    line-height: 40px; 
		    float:left;
		    color: white;
		    background-color: #08c;
		    border-radius: 20px;
		    text-align: center;
		    text-decoration: none;
		}
	</style>
</head>
<body>
	<input type="button" class="btn" id="code" value="获取验证码" onclick="codeButton()">
</body>
<script type="text/javascript">
	function codeButton(){
	    var code = $("#code");
	    code.attr("disabled","disabled");
	    setTimeout(function(){
	    	code.css("opacity","0.8");
	    },1000)
	    var time = 60;
	    var set=setInterval(function(){
	    code.val("("+--time+")秒后重新获取");
	    }, 1000);
	    setTimeout(function(){
	    code.attr("disabled",false).val("重新获取验证码");
	    clearInterval(set);
	    }, 60000);
	}
</script>
</html>

攻城狮YanGo

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
获取短信验证码倒计时，非常简单

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name='viewport' content='width=device-width,minimum-scale=1.0 maximum-scale=1.0 user-scalable=no' /&
复制链接

扫一扫