js60倒计时

最新推荐文章于 2023-02-11 10:27:46 发布

uuai

最新推荐文章于 2023-02-11 10:27:46 发布

阅读量1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_39019768/article/details/80168268

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>60s倒计时(使用jq)</title>
	</head>
	<body>
         <span id="countDownText" style="display: none;">60重新获取</span>
		<span  id="timeBtn">获取验证码</span>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		//发送验证码
		$("#timeBtn").click(function() {
			$("#timeBtn").hide();
			$("#countDownText").show();
			var countDown = 60;
			var setTime = setInterval(function() {
				if(countDown <= 0) {
					clearInterval(setTime);
					$("#countDownText").text('获取验证码');
					$("#countDownText").hide();
			        $("#timeBtn").show();
				} else {
					countDown--;
					$("#countDownText").text(countDown+"重新获取");
				}
			}, 1000);
		})
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>60s倒计时(js)</title>
	</head>
	<body>
      <input type="button" value="获取验证码" οnclick="code(this)" />
	</body>
	<script type="text/javascript">
	   var time = 6;
		function code(obj) {
			if(time == 0) {
				obj.removeAttribute('disabled', false);
				obj.value='获取验证码';
				time = 6;
				return;
			} else {
				obj.setAttribute('disabled', true);
				obj.value="从新获取(" + time + "s)";
				time--;
			}
			setTimeout(function() {
				code(obj);
			}, 1000)
		}
	</script>
</html>

//设置属性
// setAttribute：
// 1：给某个元素设置属性，两个参数（属性名，属性值）
// removeAttribute
// 1：通过属性名删除某一元素属性，一个参数（属性名）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>60s倒计时（使用jq）</title>
	</head>
	<body>
      <input type="button" value="获取验证码" οnclick="code(this)" />
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
	var time = 6;
		function code(obj) {
			var obj = $(obj);
			if(time == 0) {
				obj.attr('disabled', false);
				obj.val('获取验证码');
				time = 6;
				return;
			} else {
				obj.attr('disabled', true);
				obj.val("从新获取(" + time + "s)");
				time--;
			}
			setTimeout(function() {
				code(obj);
			}, 1000)
		}
	</script>
</html>

uuai

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js60倒计时

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;60s倒计时(使用jq)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;span id=&quot
复制链接

扫一扫

专栏目录