H5调用接口实现滑动条控制设备

目前做的项目是需要调用京东的接口，对于小白的我来说，接口花了我好长的时间去理解：

好比说我们做的是窗帘的项目，滑动条的数值就是窗帘的开合度，你的H5真正是用来控制窗帘的，也就是你滑动条的数值要给到窗帘里面去，才可以控制窗帘开合度，而怎么把数据给窗帘呢，接口就是定义了这些方法，也就是你不用弄懂他是怎么给到窗帘的，直接用就可以了；接口里面有很多数据，关于窗帘的，比如说窗帘的Curpercentage(开合度)，就可以通过接口来获取到，然后再给他传值，然后再传回接口，操作设备；以上是我对接口的理解

滑动条我是做了两个div，和一个circle

html:

 <div id="progress">
        <div id="progressLeft"></div>
        <div class="circle"></div>
    </div>

css:

#progress{
    margin:0.796rem auto ;
    width:82%;
    height:0.031rem;
    background:#999999 ;
    position: relative;
}

#progressLeft{
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height:0.031rem;
    background: #3164E8;
}

.circle{
    position: absolute;
    left: -0.359rem;
    top: -0.359rem;
    width: 0.718rem;
    height: 0.718rem;
    border: 0.046rem solid #3164E8 ;
    background: #FFFFFF;
    border-radius: 50%;
}

效果是这种：

这个项目调用的是京东的一个接口，首先有一个入口函数，入口函数里面包含之后所有的函数，跟接口有关的函数；然后init初始化返回 app 初始化设备数据，包含设备信息和快照信息；获取设备快照getSnapshot；控制设备接口command等；

其中对于快照我也理解了一些时间；
下面是参考了别的大神的理解

 快照即为Web Cache，可以翻译为网页缓存，当搜索引擎派出蜘蛛去对网站进行索引的时候，会去对网站页面进行拍照抓取，生成一个临时的缓存页面，因此缓存页面是存储于搜索引擎服务器上的，故打开速度远远高于直接访问网页的速度。快照中的关键词（keywords）以高亮显示，用户通过在搜索引擎中搜索的时候，能更加快速的选择寻找到自己所需要的。当搜索的网页因为种种问题而不能打开的时候，便可以利用快照去打开原始网页进行浏览。
--------------------- 
作者：baidu_33831211 
来源：CSDN 
原文：https://blog.csdn.net/baidu_33831211/article/details/52850984 
版权声明：本文为博主原创文章，转载请附上博文链接！

之后 个人的理解就是获取到当前页面的信息，比如我现在在后台把Curpercentage改成30了，但是获取快照之后Curpercentage不是30，这时会把后台的值赋给页面上的滑动条。达到一个更新的效果，快照的更新可以给他用一个定时器，很快更新一次；

调用完接口之后，获取到Curpercentage的值，就是用DOM来控制页面上的操作，其中用到了

document.querySelector("#progress").onclick=function(e){
    console.log("进度条被点击");
    var percent=Math.ceil(e.offsetX/length*100);    //百分比
    console.log(length);
        openCloseUi(percent);                         //更新样式
        openCloseDegree(percent);                     //向后端发送指令 调节开合度
};

function changeUi(CurPercentage) {
    var num=document.querySelector("#num");
    var progressLeft=document.querySelector("#progressLeft");
    var circle=document.querySelector(".circle");
    var circleWidth=Number(window.getComputedStyle(circle).width.split("px")[0]); //圆圈宽度
    console.log(circleWidth);
    num.innerHTML=CurPercentage;
    progressLeft.style.width=CurPercentage/100*length-circleWidth/2+"px";     //左边进度条
    console.log(length);
    circle.style.left=CurPercentage/100*length-circleWidth/2+"px";            //圆圈位置
}

Math.ceil（）是浮点数向上取整，e.offsetX.length是横坐标，是离得最近的横着的长度
window.getComputedStyle(circle)是方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。

于是乎，手机和设备就可以连起来啦