滑块验证

最新推荐文章于 2022-08-19 14:41:39 发布

凌行疾风影

最新推荐文章于 2022-08-19 14:41:39 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/qq_43656995/article/details/103094895

版权

滑块验证

<html>
<head>
<meta charset="utf-8">
<title>滑块验证</title>
<style type="text/css">
#da{position:absolute;top:50px;left:50px;width:3
00px;height:200px;background:url(bg45.jpg) no-repeat;
background-size:300px 200px;}
#da2{position:absolute;top:50px;left:150px;
width:50px; height:50px;background-color:
red;float:left;z-index:1;}
#da1{position:absolute;top:50px;left:10px;
width:50px; height:50px;background-color:green;
float:left;z-index:2;}
#da3{position:absolute;top:170px;left:0px;width:300px;
height:30px;background-color:green;float:left; }
#da4{position:absolute;width:50px;height:30px
;top:0px;left:10px;background-color:red;}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="da">
<div id="da1"></div>
<div id="da2"></div>
<div id="da3">
<div id="da4"></div>
</div>
</div>
<script type="text/javascript">
var sa1=document.getElementById('da1');
var sa2=document.getElementById('da2');
var sa3=document.getElementById('da3');
var sa4=document.getElementById('da4');
sa4.οnclick=function(e) {
	var e=e||event;
	e.stopPropagation();
	if(sa1.offsetLeft!=sa2.offsetLeft) {
	this.style.left=this.offsetLeft+5+'px';
	sa1.style.left=this.style.left;
	}
	if(sa1.offsetLeft==sa2.offsetLeft) {
		alert('恭喜你，验证码成功了');
	}
	
};
</script>
</body>
</html>

凌行疾风影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滑块验证

滑块验证<html><head><meta charset="utf-8"><title>滑块验证</title><style type="text/css">#da{position:absolute;top:50px;left:50px;width:300px;height:200px;background:...
复制链接

扫一扫