js写的滑动解锁

css部分

*{
            margin:0;
            padding: 0;
            box-sizing: border-box;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .outer{
            position: relative;
            margin:20px auto;
            width: 200px;
            height: 30px;
            line-height: 28px;
            border:1px solid #ccc;
            background: #ccc9c9;
        }
        .outer span,.filter-box,.inner{
            position: absolute;
            top: 0;
            left: 0;
        }
        .outer span{
            display: block;
            padding:0  0 0 36px;
            width: 100%;
            height: 100%;
            color: #fff;
            text-align: center;
        }
        .filter-box{
            width: 0;
            height: 100%;
            background: green;
            z-index: 9;
        }
        .outer.act span{
            padding:0 36px 0 0;
        }
        .inner{
            width: 36px;
            height: 28px;
            text-align: center;
            background: #fff;
            cursor: pointer;
            font-family: "宋体";
            z-index: 10;
            font-weight: bold;
            color: #929292;
            cursor: move;
        }
        .outer.act .inner{
            color: green;
        }
        .outer.act span{
            z-index: 99;
        }

html部分

<div class="outer" id="outer">
        <div class="filter-box"></div>
        <span id="span">
            滑动解锁
        </span>
        <div class="inner" id="inner">>></div>
    </div>

js部分

var inner=document.getElementById('inner');
        var outer=document.getElementById('outer');
        var span=document.getElementById('span');
        var left;
        var dx=outer.offsetWidth-inner.offsetWidth;//能移动的最大距离
        inner.onmousedown=function(event){//鼠标按下
            var event=window.event||ev;
            left=event.clientX-inner.offsetLeft;//鼠标按下时的位置
            document.onmousemove=function(event){//鼠标移动
                var event = window.event||ev;
                lefta=event.clientX-left;//鼠标移动的距离
                console.log(dx,lefta);
                if(lefta<0){
                    lefta=0;
                }else if(dx<lefta){
                    lefta=dx;
                    
                }
                inner.style.left=lefta+'px';
                    
            }
        document.onmouseup = function(event){//鼠标抬起
            var event = window.event||ev;
　　　　　　document.onmousemove = null;
　　　　　　document.onmouseup = null;

                lefta=event.clientX-left;
                if(lefta<0){
                    lefta=0;
                    span.innerHTML='滑动解锁';
                
                }else if(dx<lefta){
                    lefta=dx;
                    span.innerHTML='解锁成功';
                    inner.innerHTML='√';
                    inner.onmousedown=null;
                    
                }else{
                    lefta=0;
                }
                inner.style.left=lefta+'px';
                
　　　　};
}