手搓图片滑动验证码

手搓图片滑动验证码_JavaScript进阶

news2025/5/24 12:24:31

手搓图片滑动验证码

背景
代码
效果图
展示网站

背景

在做前端项目开发的时候，少不了登录注册部分，既然有登录注册就少不了机器人验证，验证的方法有很多种，比如短信验证码、邮箱验证码、图片滑动、图片验证码等。

由于鄙人在开发中涉及到图片滑动验证，找来找去，找不到满意的轮子，同时组件库里也没有，于是一怒之下自己手搓了一个。各种功能实现的也还可以，够用。

请添加图片描述

组件用vue3写的，如果是原生的话需要自行转换一下。

代码

代码写的有一段时间了，由于鄙人英语撇脚，所以先奉上结构说明图便于理解HTML结构
在这里插入图片描述

<template>
  <div class="outer">
    <div class="img-out">
      <img :src="imgurll" alt="" />
      <p class="quekuai"><img :src="imgurll" alt="" /></p>
      <p class="kongkuai"></p>
    </div>
    <div class="huadongtiao">
      <p class="huadongkuai" ref="hdk"></p>
    </div>
  </div>
</template>
  
<script>
import axios from "axios";
import { reactive, ref, onMounted } from "vue";
export default {
  name: "SliderShou",
  emits: ["success"],
  setup(props, context) {
    var imgurll = ref("");
    getUrl().then((val) => {
      imgurll.value = val;
    });
    onMounted(function () {
      var hdk = document.querySelector(".huadongkuai"); //下方的滑块
      var qk = document.querySelector(".quekuai"); //滑动的缺失块
      var qkimg = qk.children[0]; //缺失块里面的imDOM
      var kk = document.querySelector(".kongkuai"); //空白半透明的块
      var kleft = Math.floor(Math.random() * (210 - 100 + 1)) + 100; //空的方块的位置随机数
      kk.style.left = kleft + "px"; //初始化空块的位置
      qkimg.style.left = -kleft + "px"; //初始化滑动块的图片位置
      //console.log('##',imgurll.value);
      //鼠标拖动滑块的事件
      hdk.onmousedown = function (e) {
        e = window.e || e;
        hdk.style.transition = "0s";
        qk.style.transition = "0s";
        var yleft = e.clientX;
        document.body.onmousemove = function (e) {
          e = window.e || e;
          hdk.style.left = e.clientX - yleft + "px";
          qk.style.left = e.clientX - yleft + "px";

          if (e.clientX - yleft < 0 || e.clientX - yleft > 250) {
            hdk.style.transition = "0.4s";
            qk.style.transition = "0.4s";
            hdk.style.left = "0px";
            qk.style.left = "0px";
            document.body.onmousemove = null;
          }
        };
      };
      // 在其他位置抬起鼠标依旧判断
      document.body.onmouseup = function () {
        if (
          kleft - parseFloat(qk.style.left) < 10 &&
          kleft - parseFloat(qk.style.left) > -10
        ) {
          context.emit("success");
          getUrl().then((val) => {
            imgurll.value = val;
          });
        } else {
          hdk.style.left = "0px";
          qk.style.left = "0px";
        }
        document.body.onmousemove = null;
      };
      //鼠标滑动完成鼠标抬起之后的位置判断
      hdk.onmouseup = function () {
        if (
          kleft - parseFloat(qk.style.left) < 10 &&
          kleft - parseFloat(qk.style.left) > -10
        ) {
          context.emit("success");
          getUrl().then((val) => {
            imgurll.value = val;
          });
        } else {
          hdk.style.left = "0px";
          qk.style.left = "0px";
        }
        document.body.onmousemove = null;
      };
    });
    //获取图片，图片接口的话这里你们可以去网上找免费的，
    async function getUrl() {
      let imgurl = "";
      await axios({
        method: "get",
        // headers:{
        //   ContentType: "application/json",
        //   "Access-Control-Allow-Origin": "*",
        // },
        ContentType: "application/x-www-form-urlencoded;charset-utf-8",
        url: "图片接口",
      }).then((res) => {
        imgurl = "https://www.asongaishuijiao.com" + res.data.image_url;
      });
      return imgurl;
    }
    function callback(e, yjl) {
      e = window.e || e;
      var hdk = document.querySelector(".huadongkuai");
    }
    return {
      callback,
      imgurll,
    };
  },
};
</script>
  <style scoped>
.outer {
  width: 300px;
  margin: 0px auto;
  height: 100%;
  padding-top: 200px;
}
.img-out {
  width: 300px;
  height: 200px;
  background-color: rgb(202, 202, 202);
  position: relative;
  border: 2px solid rgb(211, 211, 211);
  box-shadow: 0 0 2px 0 rgb(198, 198, 198);
}
.img-out > img {
  height: 100%;
  width: 100%;
}
.img-out .quekuai {
  position: absolute;
  width: 50px;
  height: 50px;
  background: url() 100px -50px/300px 200px;
  top: 50px;
  z-index: 100;
  overflow: hidden;
}
.img-out .kongkuai {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  top: 50px;
  left: 200px;
  z-index: 90;
}
.quekuai img {
  width: 300px;
  height: 200px;
  position: absolute;
  top: -50px;
}
.huadongtiao {
  height: 50px;
  width: 300px;
  background-color: rgb(239, 239, 239);
  margin-top: 30px;
}
.huadongtiao .huadongkuai {
  width: 50px;
  height: 50px;
  background: rgb(193, 193, 193) url(../assets/分类.png) no-repeat 8px 10px/30px;
  position: relative;
}
</style>