我想要做的是创建一个状态栏,当您单击它时,状态栏将上升。我也没有使用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;
}


但这并不能很好地工作,因为它只能工作一次,而我找不到改变它的方法。
提前致谢

最佳答案

您需要向状态栏上的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>

10-05 20:40
查看更多