[散修弟子]JS-2197|2020年05月29日的日报-技能树.IT修真院

发表于： 2020-05-29 14:24:29
1 2271
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <style>
*{
    margin: 0;
    padding: 0;
}
.border{
    width: 375px;
    height: 489px;
    border: 1px solid #1b6ca8;
    border-radius: 10px;
    margin: 10% auto;
}
table{
    margin: 0 auto;
}
td{
    width: 120px;
    height: 120px;
    background-color:#0a97b0;
    border-radius: 10px;
}
.ctrl{
    margin: 0 auto;
    width: 368px;
    height: 120px;
}
input{
    width: 368px;
    height: 50px;
    background-color:white;
    border: 2px solid #ffd3e1;
    margin: 5px auto ;
    border-radius: 10px;
    font-size: 18px;
    color: #0a97b0;
    cursor: pointer;
    outline: none;
}
input:hover{
    background-color:#ffd3e1;
}

        </style>
    </head>
    <body>
        <div class="border">
            <table>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
            <div class="ctrl">
                <input type="button" value="开始" class="start">
                <input type="button" value="停止" class="end">
            </div>
        </div>
    </body>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            var time;
            //生成三个随机的td
            function begin(one,two,three) {
             if(one == two || two == three || one == three){
                if(one == two){
                    one = Math.floor(Math.random()*$('td').length);
                }else if(two == three){
                    two = Math.floor(Math.random()*$('td').length);
                }else if(one == three){
                    three = Math.floor(Math.random()*$('td').length);
                }
                begin(one,two,three);
            }else{
                    $('td')[one].style.backgroundColor = 'rgb'+ colors();
                    $('td')[two].style.backgroundColor = 'rgb'+ colors();
                    $('td')[three].style.backgroundColor = 'rgb'+ colors();
            }    
        }
            //随机生成rgb值
            function colors(){
                var rgb;
                var r = Math.floor(Math.random()*256);
                var g = Math.floor(Math.random()*256);
                var b = Math.floor(Math.random()*256);
                rgb = '('+r+','+g+','+b+')';
                return rgb;
            };

            $('.start').click(function(){
                //清空上一次执行的time();
                clearInterval(time);

                time = setInterval(function time (){
                    for(var i = 0;i < $('td').length; i++){
                        $('td')[i].style.backgroundColor = '';
                        }
                var one = Math.floor(Math.random()*$('td').length);
                var two = Math.floor(Math.random()*$('td').length);
                var three = Math.floor(Math.random()*$('td').length);
                begin(one,two,three);
                },1000);
                
            })

            $('.end').click(function(){
                
                clearInterval(time);
                $('td').each(function(){
                    $('td').css("backgroundColor","#0a97b0");
                    })
            })
        })
    </script>
</html>