编写实现多组件“加水”放水”并添加“水满了,感谢大家的付出!”“水放空了,请节约用水!”的提示的页面效果
时间: 2023-08-24 20:05:04 浏览: 44
以下是一个简单的实现多组件“加水”放水”并添加“水满了,感谢大家的付出!”“水放空了,请节约用水!”的提示的页面效果的示例代码:
```html
<html>
<head>
<title>水杯控制器</title>
<style>
#water {
width: 200px;
height: 300px;
border: 2px solid black;
background-color: lightblue;
position: relative;
}
#fill {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
position: absolute;
bottom: 0;
left: 75px;
cursor: pointer;
}
#empty {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
position: absolute;
bottom: 0;
right: 75px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="water">
<div id="fill"></div>
<div id="empty"></div>
</div>
<script>
var waterLevel = 0;
var maxLevel = 10;
function fill() {
if (waterLevel < maxLevel) {
waterLevel++;
document.getElementById("water").style.backgroundSize = "100% " + (waterLevel * 10) + "%";
if (waterLevel == maxLevel) {
alert("水满了,感谢大家的付出!");
}
}
}
function empty() {
if (waterLevel > 0) {
waterLevel--;
document.getElementById("water").style.backgroundSize = "100% " + (waterLevel * 10) + "%";
if (waterLevel == 0) {
alert("水放空了,请节约用水!");
}
}
}
document.getElementById("fill").addEventListener("click", fill);
document.getElementById("empty").addEventListener("click", empty);
</script>
</body>
</html>
```
这个示例代码中,我们使用了一个 div 元素来表示一个水杯,使用了 background-size 属性来控制水的高度。我们在水杯下方添加了两个按钮,分别用来加水和放水。当水的高度达到最高时,会弹出一个提示框提示“水满了,感谢大家的付出!”;当水的高度降到最低时,会弹出一个提示框提示“水放空了,请节约用水!”。