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

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

javascript html css

创建可以在javascript中不断移动的状态栏,javascript,html,css,Javascript,Html,Css,我想做的是创建一个状态栏，当你点击它时，状态栏就会上升。我也没有使用jquery。我将有多个图像，代表状态栏的每个点，然后将它们显示为一个图像，这将起作用，但我不知道是否可以将js变量链接到html中。我还发现我可以用这样的东西 HTML 但这并没有起到很好的作用，因为它只起了一次作用，我找不到改变它的方法。提前感谢您需要向状态栏上的单击事件添加事件侦听器。该函数将向上移动状态栏以下是一个例子： <!DOCTYPE html> <html> <head&

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

HTML

但这并没有起到很好的作用，因为它只起了一次作用，我找不到改变它的方法。

提前感谢

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

以下是一个例子：

<!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>

.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>