手机端效果（一）滑块效果

如今写前端代码有各类各样的框架和库，轻轻松松就实现咱们要的功能，写久了，原生js可能会模糊，为了巩固，会陆续写一些原生的代码，今天就从这个开始。

先上效果：

手机端的滑块效果，作webapp的可能都会遇到过，下面来一次实现。

html结构

<div class="range">
        <div class="range-progress"></div>
        <span class="range-bar"></span>
        <span class="range-text"></span>
 </div>

css代码：

*{
            box-sizing: border-box;
        }
        .range{
            width: 90%;
            height: 40px;
            position: relative;
            margin: auto;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
        .range:before,.range-bar,.range-text,.range-progress{
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
        }
        .range:before{
            content: '';
            display: block;
            background-color: #ccc;
            width: 100%;
        }
        .range:before,.range-progress{
            height: 2px;
            left:0;
        }
        .range-bar{
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color:#ccc ;
        }
        .range-progress{
            background-color:#00b3ee;
        }
        .range-text{
            top:100%;
            left:90%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            color:#999;
        }

js逻辑

/*阻止页面的默认滑动*/
        window.addEventListener('touchmove',function (e) {
            e.preventDefault();
        })
        var range=$('.range');
        var bar=$('.range-bar');
        var progress=$('.range-progress');
        var text=$('.range-text');
        var maxw=range.offsetWidth-bar.offsetWidth;//计算可滑动的最大距离
        var rangex=range.offsetLeft;
        var half=bar.offsetWidth/2;

        bar.addEventListener('touchstart',function (event) {
            var left=event.touches[0].pageX-rangex-half;
            render(left);
            event.preventDefault();
        })
        range.addEventListener('touchmove',function (event) {
            /*计算滑块的left距离*/
            var left=event.touches[0].pageX-rangex-half;
            render(left);
        });
        range.addEventListener('touchstart',function (event) {
            var left=event.touches[0].pageX-rangex-half;
            render(left);
        })

        //显示位置
        function render(value) {
            var left=value;
            /*判断left距离不能小于0而且不能大于最大宽度*/
            if(left<=0){
                left=0;
            }
            if(left>=maxw){
                left=maxw;
            }
            /*显示滑块的位置、进度条的长度、进度值*/
            bar.style.left=left+'px';
            progress.style.width=left+'px';
            text.innerText=Math.ceil(left/maxw*100)+'%';
        }
        function $(s) {
            return document.querySelector(s)
        }