每天一个jquery插件-做点击验证
做点击验证
页面操作的验证有很多种方式，今天尝试的就是那个随机给你排几个字放在图片上，然后你按顺序去点击，返回点击效果
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做点击验证</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
user-select: none;
}
#div {
width: 400px;
height: 300px;
border: 1px solid lightgray;
margin: 50px;
position: relative;
}
.item {
position: absolute;
border: 1px solid lightgray;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
/* 让这个dom无法被点击 */
pointer-events: none;
}
.item.dj{
border-radius: 50%;
background-color: red;
color: white;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
<script>
var arr = ["一", "二", "三", "四"];
drawstr(arr)
function drawstr(ars) {
for(var i = 0;i<arr.length;i++){
drawspan(ars[i],i+1)
}
}
//以四个点击事件为一个周期，其中假如验证有效性的验证
var counts = 0;
$("#div").click(function(e){
counts++;
var x = e.offsetX;
var y = e.offsetY;
var $dj = $("<div class='item dj' data-index='"+counts+"'>"+counts+"</div>");
$dj.appendTo($("#div"));
$dj.css({
"top":y-10+"px",
"left":x-10+"px"
})
if(counts==4){
setTimeout(function(){
check();
},200)
}
})
function check(){
if(checks()){
alert("正确")
}else{
alert("错误")
}
$(".item.dj").remove();
counts = 0;
}
function checks(){
//挨个检查坐标的相距位置，因为宽高一致，所以只要二者的坐标两点差值在宽高范围内20内，就是点到位置上了
var arr= [];//这个数组存一下记录
for(var i =1;i<=4;i++){
var flag = true;
var $txt = $(".item.txt[data-index='"+i+"']");
var $dj = $(".item.dj[data-index='"+i+"']");
var x1 = getnum($txt,"left");
var y1 = getnum($txt,"top");
var x2 = getnum($dj,"left");
var y2 = getnum($dj,"top");
flag = Math.abs(x1-x2)<20?true:false;
flag = Math.abs(y1-y2)<20?true:false;
arr.push(flag);
}
console.log(arr)
return arr[0]&&arr[1]&&arr[2]&&arr[3];
}
function getnum($dom,str){
return parseInt($dom.css(str).replace("px",""));
}
function drawspan(str,temp) {
//随机产生定位
var top = Math.floor(Math.random() * 300);
var left = Math.floor(Math.random() * 400);
var deg = Math.floor(Math.random() * 361);
top = top < 20 ? 20 : top > 280 ? 280 : top;
left = left < 20 ? 20 : left > 380 ? 380 : left;
var $item = $("<div class='item txt' data-index='"+temp+"'>" + str + "</div>");
$item.appendTo($("#div"));
$item.css({
'left': left + 'px',
'top': top + 'px',
'transform':'rotate('+deg+'deg)'
})
}
</script>
思路解释
- 随机渲染就是随机产生管理位置的两坐标参数就行了，要点效果就额外加个旋转的让图标转一点点角度
- 然后点击同理，反正满四次点击就验证一波，然后清空再来
- 验证的时候不难，因为我这里还算是比较简单的，反正这些东西都有一个坐标，暂且就是left和top就行了，此外鼠标的点击也可以获得在这个容器中的相对位置offset，这样子两组坐标就有了
- 关于验证顺序那就在渲染的时候标记上是第几个标记就行，然后挨个一对对的拿来判断，反正高宽一直，我直接算坐标的差距就行了
- 完事，休息