最近的需求有个简单的移动端页面，需要在页面中实现一个进度条的拖动，因为没引入什么框架，所以只能原生JavaScript手写了，
效果图：
代码：这些代码可以复制到本地一个html文件中，直接双击打开，但是注意：因为是针对移动端的，所以要在浏览器的手机模式下才能用！！！
<!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>Document</title></head><body><div class="wrap" id="wrap"><div class="proportion" id="proportion"></div><span class="box" id="box"></span></div><p>百分比： <span id="number"></span></p></body><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">let wrap = document.getElementById("wrap");let box = document.getElementById("box");var touchStart_x = null,touchStart_y = null,touchMove_x = null,touchMove_y = null,boxStartX = null,boxStartY = null;$("#box").on("touchstart", function (e) {touchStart_x = e.targetTouches[0].pageX;touchStart_y = e.targetTouches[0].pageY;boxStartX = $("#box").position().left;boxStartY = $("#box").position().top;});$("#box").on("touchmove", function (e) {touchMove_x = e.targetTouches[0].pageX - touchStart_x;touchMove_y = e.targetTouches[0].pageY - touchStart_y;let leftNum = boxStartX + touchMove_x;if (leftNum < 0) {leftNum = 0;} else if (leftNum > 285) {leftNum = 285;}$("#proportion").css({width: leftNum + 15,});// 计算百分比let allWidth = $("#wrap").width();if ((boxStartX + touchMove_x) <= 0) {let txt = "0%";$("#number").html(txt);}else if( (boxStartX + touchMove_x) >= 285){let txt = (((leftNum + 15) / allWidth) * 100).toFixed(0) + "%";$("#number").html(txt);}else{let txt = ((leftNum / allWidth) * 100).toFixed(0) + "%";$("#number").html(txt);}$("#box").css({left: leftNum,});});</script><style>*{box-sizing: border-box;}html {width: 100%;height: 100%;overflow: hidden;}body{padding: 20px;box-sizing: border-box;}.wrap {position: relative;width: 300px;height: 10px;background-color: #eee;border-radius: 5px;}.proportion {width: 0;height: 10px;background-color: rgb(93, 233, 64);border-radius: 5px;}.box {position: absolute;left: 0;top: -3px;width: 15px;height: 15px;background-color: orange;border-radius: 50%;cursor: pointer;}</style></html>
