原生js实现淘宝验证滑动条 onmousedown onmousemove onmouseup

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 300px;
                height: 40px;
                line-height: 40px;
                background-color: #e8e8e8;
                position: relative;
                margin: 0 auto;
                text-align: center;
            }
            
            .bg {
                width: 0px;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background-color: #75CDF9;
            }
            
            .btn {
                width: 40px;
                height: 38px;
                position: absolute;
                left: 0;
                top: 0;
                border: 1px solid #ccc;
                cursor: move;
                font-family: "宋体";
                text-align: center;
                background-color: #fff;
                -webkit-user-select: none;
                -moz-user-select: none;
                color: #666;
                z-index: 10;
            }
            
            .bg span {
                display: none;
            }
        </style>
    </head>

    <body>
        <div class="box">
            请拖动滑块解锁
            <div class="bg" id="bg">
                <span>验证成功</span>
            </div>
            <div class="btn" id="btn">&gt;&gt;</div>
        </div>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                //获取元素
                var oBox = document.querySelector(".box");
                var oBg = document.getElementById("bg");
                var oBtn = document.getElementById("btn");
                var oSpan = document.querySelector(".bg span");
                console.log(oBtn.innerHTML);

                var bgWidth = oBox.offsetWidth - oBtn.offsetWidth;
                console.log(bgWidth);
                //绑定事件
                oBtn.onmousedown = function(e) {

                    var left = this.offsetLeft; //0
                    //起点--鼠标相对于浏览器的位置
                    var originX = e.clientX;

                    oBtn.onmousemove = function(e) {
                        var Left = parseInt(oBtn.style.left);
                        console.log(Left);

                        if(oBtn.style.left == bgWidth + 'px') {
                            oBg.style.background = "forestgreen";
                            oSpan.style.display = "block";
                            oBtn.innerHTML = '<div class="btn" id="btn">√</div>';
                            oBtn.style.border = "0"
                            return false;
                            oBtn.style.left = bgWidth + "px";
                        }
                        if(Left < 0 || Left >= bgWidth) {
                            return false;
                        }
                        
                        //终点
                        var endX = e.clientX;
                        //移动的距离
                        var distanceX = endX - originX;

                        oBtn.style.left = (left + distanceX) + "px";

                        //改变bg
                        oBg.style.width = (left + distanceX) + "px";

                    }
                }
                //移除move事件
                document.onmouseup = function() {
                    oBtn.onmousemove = null;
                    console.log(oBtn.style.left);
                    if(oBtn.style.left != bgWidth + 'px') {
                        oBtn.style.left = 0 + "px";
                        oBg.style.width = 0 + "px";

                    }

                }

            }
        </script>
    </body>

</html>

相关阅读:
ELK相关操作记录-运维笔记
 php执行普通shell命令
 rsync 限速同步文件
 mysql 压测工具启动报 error while loading shared libraries: libmysqlclient.so.20解决办法
 php连接SQL server 数据库测试php脚本
 mysql 5.6.24 主从配置(增加从库)
Mysqldump参数大全（参数来源于mysql5.5.19源码）
Linux下mysql-5.6重置root密码
 WSDL文档深入分析
 随笔
原文地址：https://www.cnblogs.com/150536FBB/p/9787549.html