一个简单的效果 - 如何取出 400ml 的水
题目：
只有一个 500ml 容器和一个 300ml 容器，且水有无限多，如何才能刚好取出 400ml 的水？
工具
300ml 容器，500ml 容器，水
解题思路
1、先把 500ml 的容器接满
2、用装满水的 500ml 容器将 300ml 的容器倒满得到 200ml 的水
3、把 300ml 的容器清空
4、把 500ml 容器中剩余的 200ml 水倒入 300ml 的容器中，此时 300ml 的容器只能再装 100ml 的水
5、把 500ml 的容器重新接满水
6、用装满水的 500ml 容器将 300ml 的容器倒满，此时只能倒入 100ml 的水，于是可以刚好得到 400ml 的水
效果图演示
这是两个空的容器
第一步
第二步
第三步
第四步
第五步
第六步
源码
<!DOCTYPE>
<html>
<head>
<title>取水</title>
<style>
#small,#large,#menu{
text-align: center;
font-size: 25px;
}
#small,#large{
width: 200px;
position: fixed;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border: 2px solid #000;
overflow: hidden;
}
#small{
height: 300px;
top: 300px;
left: 200px;
}
#large{
height: 500px;
top: 100px;
left: 500px;
}
#menu{
width: 100px;
position: fixed;
top: 100px;
left: 800px;
}
#menu>p:hover{
cursor: pointer;
background: lightblue;
}
.water{
width: 100%;
height: 0;
position: absolute;
bottom: 0;
background: lightblue;
transition: all 2s ease;
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
}
</style>
</head>
<body>
<div id="small">
<div class="water"></div>
</div>
<div id="large">
<div class="water"></div>
</div>
<div id="menu">
<p>第1步</p>
<p>第2步</p>
<p>第3步</p>
<p>第4步</p>
<p>第5步</p>
<p>第6步</p>
</div>
<script>
var water = document.getElementsByClassName("water");
var menu = document.getElementById("menu");
var p = menu.getElementsByTagName("p");
for(var i=1; i<p.length; i++) {
p[i].style.display = "none";
}
p[0].onclick = function() {
change(1,500);
show(0,1)
}
p[1].onclick = function() {
change(0,300);
change(1,200);
show(1,2)
}
p[2].onclick = function() {
change(0,0);
show(2,3)
}
p[3].onclick = function() {
change(0,200);
change(1,0);
show(3,4)
}
p[4].onclick = function() {
change(1,500);
show(4,5)
}
p[5].onclick = function() {
change(0,300);
change(1,400);
show(5,"")
}
function change(adx,num) {
if(num == "") {
water[adx].style.height = 0;
}else{
water[adx].style.height = num + "px";
}
water[adx].innerHTML = num;
}
function show(a,b) {
p[a].style.display = "none";
if(b != "") {
p[b].style.display = "block";
}
}
</script>
</body>
</html>