纯js滑块验证，并适配手机，PC

最新推荐文章于 2024-03-21 22:40:56 发布
最新推荐文章于 2024-03-21 22:40:56 发布
阅读量1.0k 收藏 3
点赞数
文章标签： javascript css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gongxinhui89/article/details/130600074
版权 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简易滑动拼图解锁</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    .topCanvas img,
    .topCanvas canvas {
      width: 330px;
      height: 155px;
    }

    img {
      display: none;
    }

    #myCanvas {
      position: absolute;
      float: left;
    }
    .topCanvas{
      position: relative;
    }
    .topCanvas .prompt{
      width: 330px;
      height: 40px;
      position: absolute;
      bottom: 4px;
      left: 0px;
      color: #fff;
      font-size: 15px;
      line-height: 40px;
      display: none;
    }

    .verify {
      position: relative;
      width: 330px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border: 1px solid #ddd;
      color: #333;
    }

    .verify .leftbar {
      position: absolute;
      left: -1px;
      top: -1px;
      width: 40px;
      height: 39px;
      background: #f0fff0;
      border: 1px solid #ddd;
    }
    .verify .leftbar .slide {
      position: absolute;
      width: 40px;
      height: 40px;
      border-right: 1px solid #ddd;
      border-left: 1px solid #fff;
      background: url("./img/bg/icon.png") no-repeat center;
      background-size: 20px 20px;
      background-color: #fff;
    }
    /* position:relative 移动端左移会滑动 */
    /* position:fixed 解决左移滑动问题*/

    .lockBox {
      position: fixed;
    }

    .bigBox {
      width: 330px;
      margin: 10px auto;
    }
  </style>
</head>

<body>
  <div class="bigBox">
    <!-- 图片 -->
    <div class="lockBox">
      <div class="topCanvas">
        <img src="./img/bg/star-squashed.jpg" alt="随机拼图">
        <canvas id="myCanvas"></canvas>
        <canvas id="block"></canvas>
        <div class="prompt">验证失败</div>
      </div>
      <!-- 滑块 -->
      <div class="verify">
        <!-- 滑块 -->
        <div class="leftbar">
          <div class="slide">
          </div>
        </div>
      </div>
    </div>
  </div>
<script>
  const w = 330 // canvas宽度
  const h = 155 // canvas高度
  const l = 35 // 滑块边长
  const r = 5 // 滑块半径
  const PI = Math.PI
  const L = l + r * 2 + 3 // 滑块实际边长

  // 拼图滑块
  var c = document.querySelector("#myCanvas");
  var ctx = c.getContext("2d");

  // 拼图背景图
  var c2 = document.querySelector("#block");
  var ctx2 = c2.getContext("2d");
  var img = document.querySelector("img");

  // 绘制拼图背景
  function drawImage() {
    ctx.drawImage(img, 0, 0, 330, 155);
    ctx2.drawImage(img, 0, 0, 330, 155);
  }

  img.onload = function() {
    // 初始化拼图
    drawImage();
  }

  // 拼图滑块挖掘
  function drawPath(ctx, x, y, operation) {
    ctx.beginPath()
    ctx.moveTo(x, y)
    ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI)
    ctx.lineTo(x + l, y)
    ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI)
    ctx.lineTo(x + l, y + l)
    ctx.lineTo(x, y + l)
    ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true)
    ctx.lineTo(x, y)
    ctx.lineWidth = 1
    ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'
    ctx.stroke()
    ctx.globalCompositeOperation = 'destination-over'; //重要
    operation === 'fill' ? ctx.fill() : ctx.clip()
  }

  // 随机位置但是要同高度
  function randomNum(start, end) {
    return Math.floor(Math.random() * (end - start) + start);
  }

  // 随机位置创建拼图
  let x = randomNum(L + 10, w - L - 20);
  let y = randomNum(10 + 2 * r, h - L - 20);

  // 不动的挖空
  drawPath(ctx2, x, y, 'fill');
  // 滑块切割，
  drawPath(ctx, x, y, 'clip');
  // 控制同等高度，定位在左边
  document.querySelector("#myCanvas").style.left = -x + 'px';
  // 网页端滑动解锁 事件
  // 监听滑块事件
  document.querySelector(".slide").onmousedown = function(e) {
    //获取相对的时间
    let startMoveTime = new Date();
    document.onmousemove = function(e2) {
      // 最大滑动距离为下方盒子长-滑块长
      //范围内拖动
      if (e2.clientX > e.clientX && e2.clientX - e.clientX <= w - L + 10) {
        // 使得滑块和拼图一起动
        document.querySelector(".slide").style.left = e2.clientX - e.clientX + 'px';
        document.querySelector("#myCanvas").style.left = -x + e2.clientX - e.clientX + 'px';
        document.querySelector(".slide").style.backgroundColor = 'rgb(51,122,183)';
        document.querySelector(".leftbar").style.width = e2.clientX - e.clientX + 'px';
        document.querySelector(".leftbar").style.borderColor = "rgb(51,122,183)";
      }
      document.onmouseup = function() {
        // 判断拼图位置是否正确,拖拉距离是否是随机生成的拼图x
        let result = false;
        // 正确提示正确，误差为10以内为正确
        if (e2.clientX - e.clientX - 10 <= x && x <= e2.clientX - e.clientX + 10) {
          result = true;
          // 验证成功
          let endMovetime = new Date();
          let timer = ((endMovetime - startMoveTime)/1000).toFixed(2)
          document.querySelector(".slide").style.backgroundColor = 'rgb(92,184,92)';
          document.querySelector(".slide").style.backgroundImage = 'url("./img/bg/success.png")';
          document.querySelector(".leftbar").style.width = e2.clientX - e.clientX + 'px';
          document.querySelector(".leftbar").style.borderColor = "rgb(92,184,92)";
          document.querySelector(".prompt").innerHTML = timer+"s验证成功";
          document.querySelector(".prompt").style.display = "block";
          document.querySelector(".prompt").style.backgroundColor = 'rgb(92,184,92,.5)';
          clearInterval(timer);
        } else {
          // 验证失败
          document.querySelector(".slide").style.backgroundColor = 'rgb(217,83,79)';
          document.querySelector(".slide").style.backgroundImage = 'url("./img/bg/error.png")';
          document.querySelector(".leftbar").style.width = e2.clientX - e.clientX + 'px';
          document.querySelector(".leftbar").style.borderColor = "rgb(217,83,79)";
          document.querySelector(".prompt").innerHTML = "验证失败";
          document.querySelector(".prompt").style.display = "block";
          document.querySelector(".prompt").style.backgroundColor = 'rgba(217,83,79,.5)';
          location.reload();
        }
        // 解除以下事件
        document.onmousemove = null;
        document.onmouseup = null;
      }
    }
  }
  // 移动端
  document.querySelector(".slide").ontouchstart = function(e) {
    let touch = e.targetTouches[0];
    let startMoveTime = new Date();
    document.ontouchmove = function(e2) {
      let touch2 = e2.targetTouches[0];
      // 最大滑动距离为下方盒子长-滑块长
      //范围内拖动
      if (touch2.pageX > touch.pageX && touch2.pageX - touch.pageX <= w - L + 10) {
        // 使得滑块和拼图一起动
        document.querySelector(".slide").style.left = touch2.pageX - touch.pageX + 'px';
        document.querySelector("#myCanvas").style.left = -x + touch2.pageX - touch.pageX + 'px';
        document.querySelector(".slide").style.backgroundColor = 'rgb(51,122,183)';
        document.querySelector(".leftbar").style.width = touch2.pageX - touch.pageX + 'px';
        document.querySelector(".leftbar").style.borderColor = "rgb(51,122,183)";


      }
      document.ontouchend = function() {
        // 判断拼图位置是否正确,拖拉距离是否是随机生成的拼图x
        let result = false;
        let endMovetime = new Date();
        let timer = ((endMovetime - startMoveTime)/1000).toFixed(2)
        // 正确提示正确，误差为10以内为正确
        if (touch2.pageX - touch.pageX - 10 <= x && x <= touch2.pageX - touch.pageX + 10) {
          result = true;
          // 滑块消失
          document.querySelector(".slide").style.backgroundColor = 'rgb(92,184,92)';
          document.querySelector(".slide").style.backgroundImage = 'url("./img/bg/success.png")';
          document.querySelector(".leftbar").style.width = touch2.pageX - touch.pageX + 'px';
          document.querySelector(".leftbar").style.borderColor = "rgb(92,184,92)";
          document.querySelector(".prompt").innerHTML = timer+"s验证成功";
          document.querySelector(".prompt").style.display = "block";
          document.querySelector(".prompt").style.backgroundColor = 'rgb(92,184,92,.5)';
        } else {
          // 验证失败
          document.querySelector(".slide").style.backgroundColor = 'rgb(217,83,79)';
          document.querySelector(".slide").style.backgroundImage = 'url("./img/bg/error.png")';
          document.querySelector(".leftbar").style.width = touch2.pageX - touch.pageX + 'px';
          document.querySelector(".leftbar").style.borderColor = "rgb(217,83,79)";
          document.querySelector(".prompt").innerHTML = "验证失败";
          document.querySelector(".prompt").style.display = "block";
          document.querySelector(".prompt").style.backgroundColor = 'rgba(217,83,79,.5)';
          location.reload();
        }

        // 解除以下事件
        document.ontouchmove = null;
        document.ontouchend = null;
      }
    }
  }

</script>
</body>

</html>

热爱编程的小灰灰
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
大麦网滑块验证码自动识别
猫敷雪
07-11 4294
目前常见的验证码有很多种，比如数字验证码，滑动验证码，以及滑动补全图像验证码等，关于验证码的操作属于我们在UI自动化很大的一个障碍，今天安静来介绍下如何通过python来实现我们在大麦网上的滑动验证码我们先来看一张图，认识下今天将要破解的滑动验证码长什么样子。 按照我们正常操作，首先通过按住滑动验证码，然后进行往右进行移动。这里的这个操作肯定很多人就会说，我们可以用selenium中的模拟鼠标操作，是的，今天就是通过selenium中的鼠标操作来完成。当然前提肯定是先进行定位滑动框。这里还需要查看通过鼠标移
大麦autojs实现app端自动捡漏、滑块自动处理
猫敷雪
08-28 3773
近期发现大麦网页端抢购页面悄然发生变化，之前可以在页面选择票价、档次，并且点击按钮进行购票，现在不行了。并且BP链接也已经主线失效。
飞浆OCR_autojs
weixin_44234050的博客
01-27 1968
const permissionsScreenshot = screenshotRequest() if (!requestScreenCapture()) { toast("请求截图失败"); exit(); } else { permissionsScreenshot && permissionsScreenshot.interrupt() sleep(2000) img = captureScreen(); base64 = imag..
【JS】滑动验证实现
最新发布
weixin_56286359的博客
03-21 593
基于 Javascript 实现动态滑动验证效果
通用过【滑块验证】图像处理算法
05-28
通用过滑块验证图像处理算法，通用于目前互联网上几乎所有的滑块验证，该算法实现了阴影图还原、正常图制作阴影图。至于得到处理图后怎么过验证？(找图计算坐标相对位置，模拟移动)。纯算法代码，无模块良心作品.意图像处理只支持BMP格式，图像可以直接拖到窗口进行编辑操作。支持正向和逆向混合模式，混合颜色根据具体情况进行选择，选择错误的混合颜色将导致还原不正确！。补充目前市面上的滑块：白色（透明度）、黑色（不透明度）、灰色（浅灰）半透明度。3种常用混合颜色。再次补充：要获得更高的还原精度，可以将透明度改为千分单位。另外由于不同的滑块验证平台混合的颜色可能不完全是“黑白灰”，还原图色不一定能精确到100% 找图时根据需要是加上一定的偏色。@haoyuanxin。
js实现滑动拼图验证码
hanting1122的博客
06-05 1620
js实现滑动拼图验证码，我这个样式是仿那些大网站做了， 学习用的,只用到前端。 小的个人网站感觉还可以用，大一点的别人用机器一下就破解了。 下面看图示: 样子大概是这样的。 源码在这 百度网盘: 链接: https://pan.baidu.com/s/1htjxYBE 密码: m5aw 3.9MB 是因为里面绝大部分是图片 使用示例 代码里面都有 js源码 (function (window, document) { var SliderBar = function (targetDom, o
通过js实现滑块验证（简略版）
Alphamilk的博客
12-13 2891
通过js方面快速掌握滑块验证原理并且能够简单实现该功能块
按键精灵脚本学习-关于天猫抢红包
空名先生
07-06 6864
专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）
【AutoJs】AutoJs实现手势模拟，点击，滑动操作
weixin_55751186的博客
08-22 5450
autojs在android7以上系统支持了一些手势模拟操作，可以是基于控件也可以是基于指定屏幕坐标的，本文主要介绍基于坐标的几个手势模拟方法。
Autojs学习笔记 附带a系滑块实战【一篇就够】
weixin_38640052的博客
10-24 3404
Autojs学习笔记 附带 a系滑块实战【一篇就够】 万物编程先文档，本教程仅作为辅助参看，若要更加深入学习，请阅读官方文档： https://hyb1996.github.io/AutoJs-Docs/#/?
纯JS实现滑块验证
09-21
纯JS实现滑块验证；打开页面即可使用；查看源码可复制到自己项目中。自带样式，可自修改。
滑块验证,PC端滑块验证
07-27
可用于滑块验证。 可用于PC端滑块验证。 PC端滑块验证。可用于滑块验证。 可用于PC端滑块验证。 PC端滑块验证。
SliderValidation:纯js滑块验证
05-19
sliderValidation纯js滑块验证
纯JS打造的滑块拼图验证
06-14
良心制作，只为分享，下载了某人的资源，还很高分，结果不是缺这个就是缺那个，不能用，浪费了好多分，鄙视。此资源为纯JS制作，本人已经根据自己项目实际进行了改动，您下载之后，请根据自己项目需求自行调整
jQuery手机触屏拖动滑块验证跳转插件
12-27
一款简单的jQuery手机触屏拖动滑块验证跳转插件，兼容电脑端鼠标拖动和移动端触屏拖动滑块进行验证，验证成功跳转到指定网址。
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 1951
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
jquery 实现滑动条的简单验证
tfish的专栏
03-06 1749
参考： blog.csdn.net/qq_42249896/article/details/81001877 另外还需要修复原来的 drag.js 里的两处 bug。 1 在 drag.js 的 dragOk(); 这句后面添加下面两句： // 拖动成功后，将滑块置于最右侧 handler.css({'left': maxWidth}); drag_bg.css({'width...
autojs通用滑动函数swipe仿真曲线滑动，替代autojs自带的swipe
前端一线搬运工的博客
03-18 7964
/* **脚本编写:魚離ヤ吥開氺 **脚本作用:仿真随机滑动 **测试系统:安卓8.1 **测试版本:4.1.1 Alpha2 使用说明: 复制粘贴两个关键函数到自己脚本 sml_move()调用即可 */ //长距离测试 sml_move(400, 1800, 800, 230, 1000); //短距离测试 //sml_move(400, 1000, 800, 600, 1000); //此代...
autojs 滑动滑块
11-16
在使用AutoJS滑动滑块时, 首先需要确保已经安装好了AutoJS应用。接着，我们可以通过编写脚本来实现滑动滑块的功能。首先，我们需要使用AutoJS的“find”函数来找到需要滑动的滑块元素。然后，我们可以使用“swipe”函数来模拟手指滑动的动作。该函数接受4个参数：起始点的坐标(x1, y1)和结束点的坐标(x2, y2)，从而实现滑动的过程。接着使用“swipe”函数并设置好起始点和结束点的坐标，即可完成滑动滑块的功能。 同时，在编写滑动滑块的脚本时，需要考虑到不同手机屏幕的分辨率和大小，可以通过获取屏幕的宽度和高度，然后根据比例来设置起始点和结束点的坐标，以保证在不同手机上都能正常滑动滑块。 总的来说，使用AutoJS滑动滑块需要编写相应的脚本来实现，首先找到滑块元素，然后使用“swipe”函数来模拟手指滑动的动作，可以根据不同手机屏幕的分辨率进行调整，最终实现滑动滑块的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值