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