HTML+JavaScript拖拽进度条和点击进度条(显示进度条百分比)

实现进度条拖拽功能和点击功能,并显示占比

实现图:
附加改变区域位置,不影响进度条

完整代码

<!DOCTYPE html>
<html lang="zh_CN">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}#box1 {width: 500px;height: 10px;background: #bbffaa;margin: 40px auto;position: relative;}#box2 {width: 0px;height: 10px;background: #31ff00;position: relative;}#box3 {width: 40px;height: 40px;background: #31ff00;border-radius: 50px;left: -20px;position: absolute;margin-top: -15px;}#box0 {width: 600px;height: 250px;background: cornflowerblue;position: absolute;text-align: center;left: 400px;top: 0px;}#p1 {display: block;}#sub{width: 140px;height: 30px;background: #bbffaa;border: 0;border-radius: 5px;}</style><script>window.onload = function () {var box3 = document.getElementById("box3");var box2 = document.getElementById("box2");var box1 = document.getElementById("box1");var box0 = document.getElementById("box0");var p1 = document.getElementById("p1");var left_1 = document.getElementById("left_1");var top_1 = document.getElementById("top_1");var sub = document.getElementById("sub");//拖拽//当鼠标被拖拽元素上按下,开始拖拽 onmousedownbox3.onmousedown = function () {var a = box0.offsetLeft;        //100var b = box1.offsetLeft;        //50var a1 = a + b;//为document绑定移动//当鼠标移动时候,图标跟着鼠标一起动, onmousemovedocument.onmousemove = function (event) {var sl2 = document.documentElement.scrollLeft;event = event || window.event;var c = event.clientXif (c >= a1 && c <= (a1 + 500)) {box3.style.left = c - a1 - 20 + sl2 + 'px';box2.style.width = c - a1 - 20 + sl2 + 'px';var d = Math.round((c - a1) / 500 * 100);p1.innerText = d + "%";}//当鼠标松开时,被拖拽元素被固定在当前位置 onmouseupdocument.onmouseup = function () {//取消onmousemovedocument.onmousemove = null;document.onmouseup = null;}}}//点击提交,更换盒子位置sub.onclick = function () {box0.style.left = left_1.value + 'px';box0.style.top = top_1.value + 'px';}//点进度条,更新位置box1.onclick = function (event) {event = event || window.event;var a = box0.offsetLeft;        //100var b = box1.offsetLeft;        //50var a1 = a + b;var c = event.clientX;var sl2 = document.documentElement.scrollLeft;if (c >= a1 && c <= (a1 + 500)) {box2.style.width = c - a1  + sl2 + 'px';box3.style.left = c - a1 - 20 + sl2 + 'px';var d = Math.round((c - a1) / 500 * 100);p1.innerText = d + "%";}}}</script>
</head>
<body>
<div id="box0"><div id="box1"><div id="box2"><div id="box3"></div></div></div><p id="p1">0%</p><div>改变蓝色区域位置<br>向左偏移<input type="text" id="left_1">px<br>向上偏移 <input type="text" id="top_1">px<br><input type="button" value="改变" id="sub"></div>
</div></body>
</html>

HTML+JavaScript拖拽进度条和点击进度条(显示进度条百分比)相关推荐

简易而又灵活的Javascript拖拽框架（五）
====================================================== 注:本文源代码点此下载 ================================= ...
Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理...
我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...
功能强大的JavaScript 拖拽库 SortableJS
功能强大的JavaScript 拖拽库 SortableJS 官网:http://www.sortablejs.com/ 示例: 配置项: var sortable = new Sortable(el ...
JavaScript 拖拽功能
JavaScript 拖拽功能 - Web前端工程师面试题讲解拖动图片 <img draggable="true"> 一开始 html 页面 <style> ...
HTML5电子书翻页效果代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文
介绍源码名称:[HTML5电子书翻页效果]代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文源码大小:237KB 开发语言:PHP+Mysql 操作系统:Windows,Linux 源码 ...
简易而又灵活的Javascript拖拽框架（四）
一.开篇似乎拖拽已经被写烂了,没得写的了,可是我这次又来了- 上一次写的是跨列拖放,这次我要带给大家的是跨页拖放. 可以到这里来看看效果:示例效果说明:1.如果将方框拖动到页签上立刻释放掉的话,则 ...
JavaScript拖拽
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...
JavaScript拖拽函数
/此方法用于拖拽/ //参数:div1是父盒子(主要是控制要拖拽的盒子不能超出父类),div2是子盒子(即要拖动的盒子) //注意:div必须加绝对定位才能拖拽 function tuozhuai(d ...
JavaScript拖拽事件
window.onload =function(){ /* * 拖拽box1元素* - 拖拽的流程 1.当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown * 2.当鼠标移动时被拖拽元素跟随 ...

HTML+JavaScript拖拽进度条和点击进度条(显示进度条百分比)

实现进度条拖拽功能和点击功能,并显示占比

HTML+JavaScript拖拽进度条和点击进度条(显示进度条百分比)相关推荐

最新文章

热门文章