span标签获取验证码！！！（倒计时）

最新推荐文章于 2023-07-17 16:59:18 发布

AS胖丁

最新推荐文章于 2023-07-17 16:59:18 发布

阅读量586

点赞数 1

分类专栏： jquery 事件 html5 css3 web前端文章标签： span 验证码

本文链接：https://blog.csdn.net/weixin_41641581/article/details/86712638

版权

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

9 篇文章 0 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

事件

4 篇文章 0 订阅

订阅专栏

代码在下面！！！个人总结欢迎批判不足

新

年

快

乐

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="">
	<title>验证码倒计时</title>
	<style type="text/css">
		.verification{
			position:relative;
			width:400px;
		}
		.verification span{
			position: absolute;
			right: 0;
			top: 0;
			line-height: 55px;
			width: 130px;
			text-align: center;
			cursor: pointer;
			z-index: 10;
			background: #ddd;
			border-radius:5px;
		}
		.verification span.disabled{
			cursor: no-drop;
			color: #999;
		}
		.verification input{
			padding-right: 150px;
			width:220px;
			height: 53px;
			border: 1px solid #ddd;
			border-radius: 5px;
			margin-bottom: 15px;
			padding: 0 20px;
			font-size: 16px;
		}
	</style>
</head>
<body>
	<div class="verification">
		<input type="text" name="" id="" value="" maxlength="6" placeholder="动态码"/>
		<span onclick="settime($(this))">获取验证码</span>
	</div>
	<script src="http://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var countdown=60; 
		function settime(obj) { 
			if(countdown == 0){
				obj.attr("onclick","settime($(this))");
				obj.text('重新发送');
				obj.removeClass('disabled')
				countdown=60;
				return;
			}else{
				obj.removeAttr("onclick"); 
				obj.text('已发送'+countdown);
				obj.addClass('disabled')
				countdown--
			};
			setTimeout(function(){
				settime(obj)
			},1000)
		}
	</script>
</body>
</html>

获取验证码前的样式

获取验证码后的样式

AS胖丁

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
span标签获取验证码！！！（倒计时）

代码在下面！！！个人总结欢迎批判不足新年快乐 &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt; &lt;meta name="keywords" con
复制链接

扫一扫

专栏目录