原生实现滑块解锁功能(简易版本)

记得抬头微笑

于 2022-10-13 15:07:31 发布

阅读量1.3k

点赞数

分类专栏： JS 原生JS 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_40146638/article/details/127298414

版权

使用原生JavaScript创建的PC端滑块解锁功能，包括解锁、重置、进度条、结果提示和随机生成滑块位置。通过监听滑块的onmousedown、onmousemove和onmouseup事件来实现滑动跟踪、解锁判断及状态更新。常见问题解答了为何事件需绑定到document以及在鼠标抬起后解绑事件的原因。

摘要由CSDN通过智能技术生成

用原生JS实现PC端滑块解锁功能

本文实例为大家分享了 js 实现简单滑动解锁功能，供大家参考，具体内容有

解锁功能、重置功能、进度条功能、结果提示功能、随机生成滑块位置

详细实现效果和实现逻辑如下

效果图

实现逻辑

获取到对应的元素，滑动的块、滑动阴影、解锁的块、解锁的位置、解锁提示的元素、负责重置的元素。
首先我们需要监听滑块的 onmousedown 事件，记录滑块距离可视区左边的位置 - 鼠标按下的位置获得鼠标按下位置距离元素左边框的距离 left（为了解决鼠标移动，滑块不跟随的问题）
let left = ev.clientX - sliderBox.offsetLeft // 鼠标按下距离元素的位置
然后 onmousedown 事件中监听 document 的 onmousemove (鼠标移动) 事件，并根据事件对象获取到移动位置距离可视区左边的距离 lefta 然后减去鼠标按下距离元素的位置，让滑块跟着鼠标移动，并限制移动的最小距离不能小于 0 或者大于最大距离。最后将移动的距离动态绑定到滑块、滑块阴影、解锁的块身上。
其次在onmousedown 事件里监听 document 的 onmouseup (鼠标抬起)事件，判断移动结束的距离是否已经到了空白区域，如果到空白区域则解锁成功，没有达到则解锁失败，并重新生成解锁区域重置进度条等功能
点击重置的重新调用init（）方法，随机生成解锁块的位置，重置滑块解锁的位置。

代码实现

代码中包含一定程度的注释，如有疑问，敬请留言提问，收到作者评论后会及时回复~

<!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>
        :root {
   
            --iWidth: 30px;
            --iHeight: 30px;
        }

        .wrapper {
   
            width: 100%;
            margin: 0 auto;
        }

        .container {
   
            position: relative;
            width: 300px;
            height: 120px;
            background: #f2f2f2;
            box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
            border-radius: 8px;
        }

        .container-move {
   
            position: absolute;
            width: var(--iWidth);
            height: var(--iHeight);
            top: 60px;
            left: 0;
            z-index: 3;
            background: skyblue;
        }

        .container-empty {
   
            position: absolute;
            width: var(--iWidth);
            height: var(--iHeight);