Js操作DOM小练习

Js操作DOM小练习_01

1、页面引入jQuery文件和bootstrap文件；
2、贴上代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/bootstrap.css" rel="stylesheet">
    <title>wawa</title>
</head>
<style>
    *{
        margin: 0px;
     }

    .tbDiv{
        height: 10em;
        background-color: rgba(120,120,120,0.5);
    }

    .dropImg{
         14px;
        height: 4em;

        overflow: hidden;
        /*overflow: visible;*/

    }
    .dropImg img{
         100%;
    }

   .wbDiv{
       height: 10em;
       background-color: #31b0d5;
       text-align: center;
   }

</style>
<body>

<div class="container-fluid tbDiv">
</div>


<!--<div class="container-fluid">中</div>-->
<marquee direction="right" behavior="alternate" scrollamount="5"  id="marqueeId" onmouseover="this.stop()"  onmouseout="this.start()">
    <div class="dropImg" id="dropImgId">
        <img src="images/dropdown.png">
    </div>
</marquee>

<div class="container-fluid wbDiv navbar-fixed-bottom">
    <a class="btn btn-lg btn-warning" id="catchWawa">抓</a>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script>
    var cHeight=$(window).height();
    var isDown=false;

    $('#catchWawa').click(function(){
        if(!isDown){
            document.getElementById("marqueeId").onmouseover();
            slowheight(1);
            document.getElementById("preId").innerHTML="恭喜你！抓到了";
            document.getElementById("catchWawa").innerHTML="收货";
            isDown=true;

        }
        else{
            document.getElementById("marqueeId").onmouseout();
            $('#dropImgId').css('height','4em');
            document.getElementById("catchWawa").innerHTML="下手";
            isDown=false;
        }
    });


    function slowheight(m) {
         $('#dropImgId').css('height',cHeight*m/100);
         m++;
        metest= setTimeout(function() {
            if(m==76){
                $('#catchWawa').css('display','block');
               clearTimeout();
            }else{
                $('#catchWawa').css('display','none');
                slowheight(m);
            }
        },10);

    }

</script>

<pre id="preId">
    1、设置属性
    $(selector).attr('属性名','属性值')

    2、获取当前浏览器可是区域宽度：
    var cWidth=$(window).width();


</pre>
</body>
</html>