14
社区成员
发帖
与我相关
我的任务
分享动态垃圾桶容量可视化代码示例(html)
说明
这段代码实现了一个动态的垃圾桶容量可视化效果。通过使用HTML、CSS和JavaScript，它展示了一个具有填充水平的垃圾桶图形，并根据输入范围内的值动态地调整填充水平的高度。当填充水平低于50%时呈绿色，介于50%至80%之间时呈橙色，超过80%时呈红色。用户可以使用滑动条来改变填充水平，并实时观察到图形的变化。这个代码示例可以用于展示数据可视化或者动态效果的开发。
代码
<!DOCTYPE html>
<html>
<head>
<style>
.trash-can {
border: 2px solid #000;
width: 200px;
height: 300px;
position: relative;
margin: 50px auto;
overflow: hidden;
}
.trash-can:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
background-color: #e1e1e1;
z-index: 1;
}
.trash-can .fill-level {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #6db550;
z-index: 2;
}
.trash-can .capacity-level {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #e1e1e1;
z-index: 0;
}
/* 新增样式 */
.fill-level.green {
background-color: #6db550;
}
.fill-level.orange {
background-color: #ffa500;
}
.fill-level.red {
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="trash-can">
<div class="fill-level" style="height: 80%;"></div>
<div class="capacity-level"></div>
</div>
<input type="range" min="0" max="100" value="75" step="1" oninput="changeFillLevel(this.value)" />
<script>
function changeFillLevel(value) {
var fillLevel = document.querySelector('.fill-level');
fillLevel.style.height = value + '%';
fillLevel.className = "fill-level"; // 重置类名
if (value < 50) {
fillLevel.classList.add("green");
} else if (value < 80) {
fillLevel.classList.add("orange");
} else {
fillLevel.classList.add("red");
}
}
</script>
</body>
</html>
效果
...全文
请发表友善的回复…
发表回复
