拖动验证（前端+后端）

按照自己的思路写了一个拖动验证，不知道别人是不是这样写的，我觉得方法应该差不多。不废话，上代码。

<?phprequire_once 'Check.php';if($data = Check::create()){$x = $data['x'];$y = ($data['y'] - 5).'px';$name = $data['name'];session_start();//开启会话，保存验证信息$_SESSION['x'] = $x;$_SESSION['name'] = $name;$_SESSION['check'] = false; //刷新本页面要重新验证。}?><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>demo7</title><style>#body{position: relative;width: 470px;height: 50px;margin: 400px auto;}#checkingBody{position: absolute;width: 470px;box-sizing: border-box;padding: 10px 10px;height: 160px;background: #E8E8E8;left: 0;top:-170px;display: none;}#checkingPack{width: 100%;height: 100%;position: relative;}#checking{width: 50px;height: 50px;position: absolute;left:0;top:<?php echo $y ?>;border: 5px solid #00FFFF;}#sliderPack{width: 440px;height: 50px;border: 1px solid darkgrey;position: relative;margin-left: 15px;}#slider{width: 50px;background: darkgrey;height: 50px;position: absolute;}#checkingPackImage{width:100%;height:100%;}#checkingImage{width: 100%;height: 100%;}</style>
</head>
<body><div id="body"><div id="checkingBody"><div id="checkingPack"><img  id="checkingPackImage"  src="<?php echo 'check/'.$name.'A.jpg' ?>" alt="<?php echo $name.'A.jpg' ?>"><div id="checking"><img id="checkingImage" src="<?php echo 'check/'.$name.'B.jpg' ?>" alt="<?php echo $name.'B.jpg'  ?>"></div></div></div><div id="sliderPack"><div id="slider"></div></div></div><script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script><script>$(function () {let sliderPack = document.getElementById("sliderPack");let slider = document.getElementById("slider");let checking = document.getElementById("checking");let checkingBody = document.getElementById("checkingBody");let isSending = false;let differenceX;let isDown = false;let isMove = false;slider.onmousedown  = function (e) {differenceX = e.clientX - this.offsetLeft;this.style.cursor = "move";checkingBody.style.display = "block";isDown = true;};sliderPack.onmousemove = function (e) {if(!isDown || isSending){return false;}isMove = true;let newLeft = e.clientX - differenceX;if(newLeft<0){newLeft = 0;}if(newLeft>390){newLeft = 390;}slider.style.left = newLeft + "px";checking.style.left = newLeft + "px";setInterval(function(){  //移动的时候，执行监听函数。let x1 = slider.style.left; //记录x1setTimeout(function () {let x2 = slider.style.left; // 300毫秒后记录x2if(x1===x2 && !isSending && isMove){ //如果x1 等于 x2 说明鼠标停留了isSending = true; //提交标识开启，防止多次提交。isMove = false; //移动标识改成false，这样做是为了让用户验证失败后要再次移动才发送验证。$.ajax({url:"demo8.php",data:{x:parseInt(slider.style.left)//把距离左边的距离去掉px 再发送},type:"get",dataType:"json",success:function (e) {if(e.message==="SUCCESS"){//验证成功}else{//验证失败isSending = false;}},error:function () {isSending = false;}})}},300)},500);};sliderPack.onmouseup = function () {if(!isDown){return false}isDown = false;slider.style.cursor = "default";};sliderPack.onmouseleave = function () {isDown = false;slider.style.cursor = "default";checkingBody.style.display = "none";}})</script>
</body>
</html>

这里用了混编的方式，只是为了演示。

<?phpclass Check
{static function create(){//生成一个随机坐标，作为裁剪图片左上角的坐标。$x = mt_rand(100,395); //最左的坐标设置成100，为了让裁剪位置尽量出现在右边的位置，好让用户滑动一定的距离。$y = mt_rand(5,85);$image = imagecreatefromjpeg('check.jpg'); //准备一张宽450 高140 的图片作为底片。$newImage = imagecreatetruecolor(50,50); //创建一个空白的图片。imagecopyresampled($newImage,$image,0,0,$x,$y,50,50,50,50); //把底片的一部分裁剪到空白的图片。$gray = imagecolorallocate($image,156,156,156); //创建灰色的画笔。imagefilledrectangle($image, $x, $y,$x+50,$y+50,$gray); //填充一个灰色的矩形并覆盖到裁剪的位置。imagesetthickness($image,6); //设置画线的宽度，准备画一个粗边框的矩形在裁剪的位置，突出裁剪的位置。$cyan = imagecolorallocate($image,0,255,255); //创建青色的画笔。imagerectangle($image,$x-3,$y-3,$x+53,$y+53,$cyan); //画青色的矩形。ini_set('date.timezone','Asia/Shanghai'); //设置时区。$dateTime = new DateTime(); //创建一个DateTime对象，用来获取毫秒。$name = date('Y').date('m').date('d').date('H').date('i').$dateTime->format('u').mt_rand(0,9);//以时间加随机数的形式作为图片名字。$path = 'check/'; //图片保存目录imagejpeg($image,$path.$name.'A.jpg'); //保存图片，底片以大写字母A结尾。imagejpeg($newImage,$path.$name.'B.jpg'); //保存图片，裁剪的图片以大写字母B结尾。imagedestroy($newImage); //释放内存。imagedestroy($image); //释放内存。$data['x'] = $x;$data['y'] = $y;$data['name'] = $name;//把坐标和名字赋值给数组。return $data;//返回数组。}
}

这个静态方法作用是创建验证用的图片。

<?php$newX = $_GET['x'];if(empty($newX)){die(json_encode('')); //如果没接收到x，返回错误信息并结束脚本
}
/**** 这里可以写限制访问次数的脚本，防止别人攻击这个接口。*********/session_start(); //开启会话$x = $_SESSION['x'];if(empty($x)){die(json_encode('')); //如果会话没有保存到x的信息，返回错误信息并结束脚本
}if($newX > $x - 10 &&  $newX < $x +10){$_SESSION['check'] = true; //如果用户发送的 x 在 会话里 保存的x 的一定范围内 则验证通过$data['message'] = 'SUCCESS';echo json_encode($data);//返回拖动验证成功标识}else{echo json_encode(''); //返回验证失败信息/***** 这里面可以写错误次数过多的脚本。*******/
}

验证坐标是否正确

<?phpsession_start();if($_SESSION['check']){//拖动验证成功，执行验证用户信息/**** 验证用户信息。************///$_SESSION['check']  = false; //如果验证用户信息成功，则改成false，拖动验证成功一次只能登录一个用户
}

验证用户信息是否正确。

以上就是全部代码。

拖动验证（前端+后端）相关推荐

前端/后端 - 表单数据验证 - 个人实践
1.应用场景主要用于前端/后端的表单数据验证. 由于在之前的老项目中开发使用, 便使用了这种方式, 但是最终没有被采用. 具体的细节已经有些遗忘了, 但是依然可以作为参考. 2.学习/操作语言: ...
微信小程序——从后台获取数据库数据并在前台显示(前端+后端+数据库)
因为人工测试的时候需要统计数据都在纸上,统计起来很麻烦.所以我想做个小程序来辅助我测试,但我之前没学过小程序,所以就一点一点搞吧.今天这篇主要讲从后台获取数据库数据并在前台显示(类似背单词小程序的点击 ...
22届春招实习试水之路汇总（前端+后端）
目录写在前面时间线记录第一批投递(后端) 第二批投递(前端) 第三批投递(前端+后端) 面经 5.29 搜狐前端实习一面(焦点)- 视频面45min - 口头offer被鸽自我介绍+项目相关 ...
Django项目实战——8—(判断用户是否登录并返回JSON、Django发送邮件的配置、生成邮箱验证链接、验证邮箱后端逻辑)
1.判断用户是否登录并返回JSON 重要提示: 只有用户登录时才能让其绑定邮箱. 此时前后端交互的数据类型是JSON,所以需要判断用户是否登录并返回JSON给用户. 方案一: 使用Django用户认证 ...
Ajax 前端后端数据交互
Ajax 前端/后端数据交互一概述同步: 一请求一响应,全局刷新异步: 多请求多响应,局部刷新 (默认为异步,效率高) 场景: 浏览网页时,未全局刷新,能更新数据的页面基本都使用了 ...
数字前端后端的区别、以及流程简介
数字前端后端的区别.以及流程简介下面转自:https://www.cnblogs.com/youngforever/p/3142483.html 前端设计(也称逻辑设计)和后端设计(也称物理设计)并 ...
浅谈IC前端后端的区别、以及流程简介
数字前端后端的区别.以及流程简介前端设计(也称逻辑设计)和后端设计(也称物理设计)并没有统一严格的界限,涉及到与工艺有关的设计就是后端设计. 个人理解是: 数字前端以设计架构为起点,以生成可以布局布 ...
前端后端数据库的交互，前后端如何打通，vue+spring boot +MySQL
前端软件:Microsoft VS Code 后端软件:IntelliJ IDEA 数据库:Navicat Premium 前端git地址:https://github.com/zouwanghua/ ...
java 前端后端分离_到底什么是前后端分离？
这里是经常容易被混淆的一些概念. 在说前后端分离之前,要先弄清楚: 1.什么是前端? 2.什么是后端? 3.什么前后端不分离? 4.什么是动态数据? 5.什么是静态文件? 6.什么是动静分离? 然后, ...

拖动验证（前端+后端）

拖动验证（前端+后端）相关推荐

最新文章

热门文章