【JavaScript】滑块验证码

举报
原来是咔咔 发表于 2022/03/27 02:15:58 2022/03/27
【摘要】 author:咔咔 wechat:fangkangfk   <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>滑块验证解锁</title> &lt...

author:咔咔

wechat:fangkangfk

 


      <!DOCTYPE html>
      <html lang="en">
      <head>
         <meta charset="UTF-8">
         <title>滑块验证解锁</title>
         <style>
             .drag{
                 width: 300px;
                 height: 40px;
                 line-height: 40px;
                 background-color: #e8e8e8;
                 position: relative;
                 margin:0 auto;
              }
             .bg{
                 width:40px;
                 height: 100%;
                 position: absolute;
                 background-color: #75CDF9;
              }
             .text{
                 position: absolute;
                 width: 100%;
                 height: 100%;
                 text-align: center;
                  user-select: none;
              }
             .btn{
                 width:40px;
                 height: 38px;
                 position: absolute;
                 border:1px solid #ccc;
                 cursor: move;
                 font-family: "宋体";
                 text-align: center;
                 background-color: #fff;
                  user-select: none;
                 color:#666;
              }
         </style>
      </head>
      <body>
         <div class="drag">
             <div class="bg"></div>
             <div class="text" onselectstart="return false;">请拖动滑块解锁</div>
             <div class="btn">>></div>
         </div>
         <script>
             //一、定义一个获取DOM元素的方法
             var $ = function(selector){
                     return  document.querySelector(selector);
                  },
                  box = $(".drag"),//容器
                  bg = $(".bg"),//背景
                  text = $(".text"),//文字
                  btn = $(".btn"),//滑块
                  success = false,//是否通过验证的标志
                  distance = box.offsetWidth - btn.offsetWidth;//滑动成功的宽度(距离)
             //二、给滑块注册鼠标按下事件
              btn.onmousedown = function(e){
                 //1.鼠标按下之前必须清除掉后面设置的过渡属性
                  btn.style.transition = "";
                  bg.style.transition ="";
                 //说明:clientX 事件属性会返回当事件被触发时,鼠标指针向对于浏览器页面(或客户区)的水平坐标。
                 //2.当滑块位于初始位置时,得到鼠标按下时的水平位置
                 var e = e || window.event;
                 var downX = e.clientX;
                 //三、给文档注册鼠标移动事件
                 document.onmousemove = function(e){
                     var e = e || window.event;
                     //1.获取鼠标移动后的水平位置
                     var moveX = e.clientX;
                     //2.得到鼠标水平位置的偏移量(鼠标移动时的位置 - 鼠标按下时的位置)
                     var offsetX = moveX - downX;
                     //3.在这里判断一下:鼠标水平移动的距离 与 滑动成功的距离 之间的关系
                     if( offsetX > distance){
                          offsetX = distance;//如果滑过了终点,就将它停留在终点位置
                      }else if( offsetX < 0){
                          offsetX = 0;//如果滑到了起点的左侧,就将它重置为起点位置
                      }
                     //4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度
                      btn.style.left = offsetX + "px";
                      bg.style.width = offsetX + "px";
                     //如果鼠标的水平移动距离 = 滑动成功的宽度
                     if( offsetX == distance){
                         //1.设置滑动成功后的样式
                          text.innerHTML = "验证通过";
                          text.style.color = "#fff";
                          btn.innerHTML = "√";
                          btn.style.color = "green";
                          bg.style.backgroundColor = "lightgreen";
                         //2.设置滑动成功后的状态
                          success = true;
                         //成功后,清除掉鼠标按下事件和移动事件(因为移动时并不会涉及到鼠标松开事件)
                          btn.onmousedown = null;
                         document.onmousemove = null;
                         //3.成功解锁后的回调函数
                         setTimeout(function(){
                             alert('解锁成功!');
                          },100);
                      }
                  }
                 //四、给文档注册鼠标松开事件
                 document.onmouseup = function(e){
                     //如果鼠标松开时,滑到了终点,则验证通过
                     if(success){
                         return;
                      }else{
                         //反之,则将滑块复位(设置了1s的属性过渡效果)
                          btn.style.left = 0;
                          bg.style.width = 0;
                          btn.style.transition = "left 1s ease";
                          bg.style.transition = "width 1s ease";
                      }
                     //只要鼠标松开了,说明此时不需要拖动滑块了,那么就清除鼠标移动和松开事件。
                     document.onmousemove = null;
                     document.onmouseup = null;
                  }
              }
         </script>
      </body>
      </html>
  
 

 

文章来源: blog.csdn.net,作者:咔咔-,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/fangkang7/article/details/88640116

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。