C#*HTML滑动验证解锁最新方法

最新推荐文章于 2024-07-25 11:26:35 发布

并肩.op

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量1.7k

点赞数 1

文章标签： html javascript html5 c# java

本文链接：https://blog.csdn.net/weixin_45686211/article/details/103595097

版权

滑动验证解锁

滑动验证码的原理

常见验证码是需要输入图中字符的，是因为机器识别字符比较困难，以此来防止机器自动的行为。
但是滑动验证码只需要鼠标滑一下就可以了，用机器来模拟这个过程轻而易举，那滑动验证码的意义在哪里？
滑动验证码可以显著优化用户体验，这在互联网时代是非常重要的。
滑动验证码对机器的判断，不只是完成拼图啥的，前端用户看不见的是——验证码后台针对用户产生的行为轨迹数据进行机器学习建模，结合访问频率、地理位置、历史记录等多个维度信息，快速、准确的返回人机判定结果，故而机器识别+模拟不易通过。
本文章呢主要想解决那些网站每次别人老是循环攻击，然后此功能让你们能够快速解决。

全部代码地址链接：https://pan.baidu.com/s/1WJDOIdIDfUdm6ypCAYcWdQ

网页链接提取码： 97h0

页面合成样式

在这里插入图片描述

HTML页面代码块

<html lang="en">
<head>

    <title>丰车验证</title>
    <!--注：这里首次用到了iconfont的语法，即矢量图标-->
    <link rel="stylesheet" href="font/iconfont.css"/>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            position: relative;
            width: 300px;
            height: 40px;
            margin: 0 auto;
            margin-top: 10%;
            background-color: #e8e8e8;
            border:1px solid #00CCFF;
            box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
        }
        .bgColor{
            position: absolute;
            left:0;
            top:0;
            width:40px;
            height: 40px;
            background-color: #87CEEB;
        }
        .txt{
            position: absolute;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #000;
            text-align: center;
        }
        .slider{
            position: absolute;
            left:0;
            top:0;
            width: 50px;
            height: 38px;
            border: 1px solid #ccc;
            background: #fff;
            text-align: center;
            cursor: move;
        }
        .slider>i{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
        .slider.active>i{
            color:green;
        }
        .btn {
        position: absolute;
        width: 40px;
        height: 32px;
        background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==) center no-repeat;
        background-size: 13px;//不设置这个属性，背景图片会不成比例的显示
        border: 1px solid #ccc;
        cursor: move;
        }
        .btns {
        position: absolute;
        width: 40px;
        height: 32px;
        background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==) center no-repeat;
        background-size: 13px;//不设置这个属性，背景图片会不成比例的显示
        border: 1px solid #ccc;
        cursor: move;
        }
        #bju
        {
            width:380px; 
            height:290px; 
            margin: auto;
            margin-top:200px;
            box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
        }
        #img
        {
        
            width:300px; 
            height:150px; 
            margin: auto;
        
        }
    </style>
</head>
<body>
    
    <div id="bju">

    <div id="img"><img src="img/提示-1.png" alt='' /><hr /></div>

    <div id="box" onselectstart="return false;">
        <div class="bgColor"></div>
        <div class="txt" >滑动验证</div>
        <!--给i标签添加上相应字体图标的类名即可-->
        <div class="slider"><i class="btn"></i></div>
    </div>

    </div>
   
</body>
</html>

JavaScript JS引用模块

<script type="text/javascript">
     //一、定义了一个获取元素的方法
     function getEle(selector) {
         return document.querySelector(selector);
     }
     //二、获取到需要用到的DOM元素
     var box = getEle("#box"), //容器
            bgColor = getEle(".bgColor"), //背景色
            txt = getEle(".txt"), //文本
            slider = getEle(".slider"), //滑块
            icon = getEle(".slider>i"),
            successMoveDistance = box.offsetWidth - slider.offsetWidth, //解锁需要滑动的距离
            downX, //用于存放鼠标按下时的位置
            isSuccess = false; //是否解锁成功的标志，默认不成功

     //三、给滑块添加鼠标按下事件
     slider.onmousedown = mousedownHandler;

     //3.1鼠标按下事件的方法实现
     function mousedownHandler(e) {
         bgColor.style.transition = "";
         slider.style.transition = "";
         var e = e || window.event || e.which;
         downX = e.clientX;
         //在鼠标按下时，分别给鼠标添加移动和松开事件
         document.onmousemove = mousemoveHandler;
         document.onmouseup = mouseupHandler;
     };

     //四、定义一个获取鼠标当前需要移动多少距离的方法
     function getOffsetX(offset, min, max) {
         if (offset < min) {
             offset = min;
         } else if (offset > max) {
             offset = max;
         }
         return offset;
     }

     //3.1.1鼠标移动事件的方法实现
     function mousemoveHandler(e) {
         var e = e || window.event || e.which;
         var moveX = e.clientX;
         var offsetX = getOffsetX(moveX - downX, 0, successMoveDistance);
         bgColor.style.width = offsetX + "px";
         slider.style.left = offsetX + "px";

         if (offsetX == successMoveDistance) {
             success();
         }
         //如果不设置滑块滑动时会出现问题（目前还不知道为什么）
         e.preventDefault();
     };

     //3.1.2鼠标松开事件的方法实现
     function mouseupHandler(e) {
         if (!isSuccess) {
             bgColor.style.width = 0 + "px";
             slider.style.left = 0 + "px";
             bgColor.style.transition = "width 0.8s linear";
             slider.style.transition = "left 0.8s linear";
         }
         document.onmousemove = null;
         document.onmouseup = null;
     };

     //五、定义一个滑块解锁成功的方法
     function success() {
         isSuccess = true;
         txt.innerHTML = "解锁成功";

         //跳转页面
         //window.location.replace("http://");
         bgColor.style.backgroundColor = "lightgreen";
         slider.className = "slider active";
         icon.className = "btns";
         //滑动成功时，移除鼠标按下事件和鼠标移动事件
         slider.onmousedown = null;
         document.onmousemove = null;
     };
    </script>

新人博客:并肩>咨询方式

并肩.op

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
C#*HTML滑动验证解锁最新方法

滑动验证解锁滑动验证码的原理常见验证码是需要输入图中字符的，是因为机器识别字符比较困难，以此来防止机器自动的行为。但是滑动验证码只需要鼠标滑一下就可以了，用机器来模拟这个过程轻而易举，那滑动验证码的意义在哪里？滑动验证码可以显著优化用户体验，这在互联网时代是非常重要的。滑动验证码对机器的判断，不只是完成拼图啥的，前端用户看不见的是——验证码后台针对用户产生的行为轨迹数据进行机器学习...
复制链接

扫一扫