Question

我想要做的是创建一个状态栏，当你点击它时，栏会上升。我也没有使用jquery。我将有多个图像，代表状态栏的每个点，然后将它们显示为图像，这将起作用，但我不知道是否可以将js变量链接到html。我还发现我可以使用这样的东西

HTML

<div class="skill_bar" style="position:absolute; top:100px; left:50px; z-index:2">
<div class="skill_bar_progress skill_one"></div>
</div>

CSS

.skill_bar {
width:20px;
height:50px;
background:#c0c0c0;
margin-bottom:5px;
}

.skill_bar_progress {
width:100%;
height:100%;
background:#00f;
}

但是这样做不是很好，因为它只运作一次，我找不到改变它的方法。提前致谢

Answer 1

您需要为状态栏上的click事件添加事件侦听器。该功能将移动状态栏。

以下是一个例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            #statusBar {
                background-color: orange;
                width: 200px;
                height: 100px;
                position: absolute;
                top: 100px;
            }
        </style>
        <script>
            addEventListener("DOMContentLoaded", function () {
                var statusBar = document.querySelector("#statusBar");
                var top = parseFloat(getComputedStyle(statusBar).top);

                statusBar.addEventListener("click", function () {
                    top = top - 10;
                    statusBar.style.top = top + "px";
                });
            });
        </script>
    </head>
    <body>
        <div id="statusBar">Status</div>
    </body>
</html>

创建一个可以在javascript中不断移动的状态栏

1 个答案: