一个简单的效果 - 如何取出 400ml 的水_500ml和300ml的容器取400ml-CSDN博客

本文链接：https://blog.csdn.net/for_xiaosong/article/details/118500550

一个简单的效果 - 如何取出 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>