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

最新推荐文章于 2021-06-19 07:07:21 发布

小云　　　　

最新推荐文章于 2021-06-19 07:07:21 发布

阅读量1.6k

点赞数 2

分类专栏： JavaScript html 文章标签： javascript html

本文链接：https://blog.csdn.net/lq24244/article/details/115830929

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

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

实现图:
附加改变区域位置,不影响进度条
在这里插入图片描述
完整代码

<!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");


            //拖拽
            //当鼠标被拖拽元素上按下,开始拖拽 onmousedown
            box3.onmousedown = function () {
                var a = box0.offsetLeft;        //100
                var b = box1.offsetLeft;        //50
                var a1 = a + b;
                //为document绑定移动
                //当鼠标移动时候,图标跟着鼠标一起动, onmousemove
                document.onmousemove = function (event) {
                    var sl2 = document.documentElement.scrollLeft;
                    event = event || window.event;
                    var c = event.clientX
                    if (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 + "%";
                    }
                    //当鼠标松开时,被拖拽元素被固定在当前位置 onmouseup
                    document.onmouseup = function () {
                        //取消onmousemove
                        document.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;        //100
                var b = box1.offsetLeft;        //50
                var 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>

小云　　　　

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML+JavaScript拖拽进度条和点击进度条(显示进度条百分比)

实现进度条拖拽功能和点击功能,并显示占比实现图:附加改变区域位置,不影响进度条完整代码<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0;
复制链接

扫一扫