AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【JavaScript】滑块验证码

2022-05-13 240
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【JavaScript】滑块验证码 
<!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>
文章标签：
JavaScript
前端开发
关键词：
JavaScript验证码
我是咔咔
目录
相关文章
破浪前进
|
6月前
|
前端开发 JavaScript
验证码（原生js加canvas绘图）
验证码（原生js加canvas绘图）
破浪前进
38 0
阿选不出来
|
JavaScript 前端开发
原生JS实现移动端短信验证码功能
原生JS实现移动端短信验证码功能
阿选不出来
239 0
原生JS实现移动端短信验证码功能
风吹落叶花飘荡
|
3月前
|
资源调度 JavaScript API
nest.js + sms 实现短信验证码登录
本文介绍了在Nest.js框架中集成短信验证码登录的实现方案，详细阐述了使用阿里云短信服务的配置流程、资质申请、短信模板设置，并提供了API调用示例和工程代码的运行步骤。
风吹落叶花飘荡
241 1
nest.js + sms 实现短信验证码登录
白雾茫茫丶
|
3月前
|
JavaScript
Nest.js 实战 (七)：如何生成 SVG 图形验证码
这篇文章介绍了使用NestJS实现Session验证的图形验证码功能的具体步骤。首先，通过powershell代码安装依赖pnpmaddsvg-captcha。然后，在控制器中使用TypeScript代码引入相关依赖，创建一个图形验证码的接口，当请求该接口时，返回一张随机图片验证码。最后，进行了效果演示。
白雾茫茫丶
87 6
Nest.js 实战 (七)：如何生成 SVG 图形验证码
lvbb66
|
3月前
|
JavaScript 前端开发
js随机验证码
js随机验证码
lvbb66
40 2
破浪前进
|
6月前
|
前端开发 JavaScript
验证码（原生js加canvas绘图）
验证码（原生js加canvas绘图）
破浪前进
41 0
1660814598353893
|
5月前
|
前端开发 JavaScript
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题，动态JS加载失败，请问怎么解决啊？急，急，急。
用户反馈校验时遇到错误，日志显示验证码参数获取异常。采用无痕验证，失败后，返回`{captchaResult:false,bizResult:false}`，未触发滑块二次验证。
1660814598353893
149 0
风与烈酒
|
6月前
|
JavaScript 前端开发
JS生成登录验证码
JS生成登录验证码
风与烈酒
46 2
风与烈酒
|
6月前
|
存储 JavaScript 前端开发
原生JS如何实现验证码
原生JS如何实现验证码
风与烈酒
59 0
熊泽-学习中的苦与乐
|
人工智能 文字识别 安全
温习数据算法—js滑块验证码
温习数据算法—js滑块验证码
熊泽-学习中的苦与乐
174 0