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

Creating a status bar that can move constantly in javascript

本文关键字：javascript 移动 状态栏 一个 创建      更新时间：2023-09-26

我想做的是创建一个状态栏，当你点击它时，栏会上升。我也没有使用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;
}

但这效果并不好，因为它只工作了一次，我找不到改变它的方法。提前致谢

您需要将事件侦听器添加到状态栏上的单击事件。该函数将向上移动状态栏。

下面是一个示例：

<!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>
相关文章：