笔记

笔记

代码实例：

      <!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        #panel,#flip{
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
            height: 500px;
            width: 500px;
            font-size: 200px;
            transform: rotateY(0); 
            transform: rotateX(1); 
            transition: 0.5s;
            opacity:1;
        }
        #panel{
            padding:50px;
            display:none;
        }
        #panel:hover{
            transform: rotateY(-90deg);opacity: 0;
            }
    </style>
</head>
<body id="bodyColor" style=" height: 5000px;">
    
        <div id="flip">别点我！</div>
        <div id="panel">Hello BUG!</div>
    
    <br /><br />
    <button>开/关</button>
    
    <div id="box" style="float: left; width: 500px; height: 500px; background-color: pink;"></div>
    <div id="box" style="float: left; margin-left:50px ; width: 500px; height: 500px; background-color: antiquewhite;"></div>
    <div id="box" style="float: left; margin-left:50px ; width: 500px; height: 500px; background-color: indigo;"></div>
    
    <br /><br />
    <button>开/关</button><!--<button>关</button>-->
    <div class="box" style="float: left; margin-left:50px ; width: 500px; height: 500px; background-color: green;"></div>
    <div class="box" style="float: left; margin-left:50px ; width: 500px; height: 500px; background-color: palegreen;"></div>
    <div class="box" style="float: left; margin-left:50px ; width: 500px; height: 500px; background-color: paleturquoise;"></div>
    <div class="box" style="float: left; margin-left:50px ; width: 500px; height: 500px; background-color: peru;"></div>
    
    <button>开/关</button><!--<button>关</button>-->
    <div class="box1" style="float: left; margin-left:50px ; width: 500px; height: 500px; background-color: brown;"></div>
    <script type="text/javascript">
    
        console.log($('#flip'));
    
        $("button").eq(0).click(function(){
            $("#box").toggle(50);
        });
        $("button").eq(1).click(function(){
            $(".box").toggle(50);
        });
        $("button").eq(2).click(function(){
            $(".box1").toggle(50);
        });
        var bool = true ;
        $("#bodyColor").click(function(){
            if(bool){
                setInterval(function(){
                    var q = parseInt(Math.random() * 9);
                    var w = parseInt(Math.random() * 9);
                    var e = parseInt(Math.random() * 9);
                    var r = parseInt(Math.random() * 9);
                    var t = parseInt(Math.random() * 9);
                    var y = parseInt(Math.random() * 9);
                    var y = parseInt(Math.random() * 9);
                    var color = `#${q}${w}${e}${r}${t}${y}` ;
                    $('#bodyColor').css({
                        "background-color":color
                    }) ;
                    
                },0.01)
            }
            
            bool = false ;
        })

        $(document).ready(function(){
          $("#flip").click(function(){
            $("#panel").slideDown(5000);
          });
        });

// $("button").eq(1).click(function(){
// $(".box").fadeIn(500);
// });
// $("button").eq(2).click(function(){
// $(".box").fadeOut(500);
// });
//

        $(function(){
            console.log("有没有被闪瞎");
        })
    </script>
</body>

</html>
##