代码改变世界

jQuery框架的简单使用（H5）

2016-11-11 10:25  甘雨路  阅读(2365)  评论(0)  编辑  收藏  举报 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>作业</title>
        <!--导入jQuery框架-->
        <script src="jQuery/jquery-3.1.0.min.js"></script>
        <script src="javascript/index.js" type="text/javascript"></script>
        <link href="css/index.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        
        <div id="bground">
            <div class="time">
                <button class="start">开始</button>
                <button class="stop">停止</button>
                <div class="count">0</div>
            </div>
            <div class="content">
                <div class="left">
                    <button class="btn">x</button>
                </div>
                <div class="center">
                    <h3>静夜思</h3>
                    <p>床前明月光，</p>
                    <p>疑是地上霜。</p>
                    <p>举头望明月，</p>
                    <p>低头思故乡。</p>
                </div>
                <div class="right">
                    <img src="images/内网通截图20161110180030.png"/>
                    <button class="button">x</button>
                </div>
            </div>
            
            <div id="bm">
                &copy; by&nbsp;&nbsp;&nbsp;LF
            </div>
        </div>
        
    </body>
</html>
body{
    background-color: deepskyblue;
}

#bground{
    /*background: yellow;*/
    position: relative;
    height: 1000px;
    width: 100%;
}
 #bground .content{
     /*background: red;*/
     position: relative;
     height: auto;
 }
 #bground .count{
     /*background: white;*/
     margin-left: 10px;
     margin-top: 15px;
     text-align: center;
     font-size: 65px;
     color: red;
    width: 100px;
    height: 60px;
    line-height: 50px;
    
 }

 #bground .content .left{
    background-color: deeppink;
    position: relative;
    /*opacity: 0.5;*/
    display: inline-block;
    width: 150px;
    height: 300px;
    left: 30px;
    top: 200px;
}

#bground .content .left button{
    position: absolute;
    right: 2px;
    top: 2px;
}

#bground .content .center{
    background: greenyellow;
    position: absolute;
    display: inline-block;
    width: 300px;
    height: 600px;
    /*margin-top: 50px;
    margin-left: 22%;*/
    left: 35%;
    top: 50px;
    text-align: center;
    
}

#bground .content .center h3{
    /*background: red;*/
    padding-top: 60px;
}

#bground .content .right{
    display: inline-block;
    position: fixed;
    right: 10px;
    top: 120px;
    width: 120px;
    height: 200px;
}

#bground .content .right img{
    width: 100%;
    height: 100%;
}

#bground .content .right button{
    position: absolute;
    left: 2px;
    top: 2px;
}

 #bground #bm{
    background-color: chocolate;
    position: absolute;
    opacity: 0.8;
    left: 25%;
    bottom: 50px;
    width: 50%;
    height: auto;
    text-align: center;

}
/*
 * jQuery的简单使用
 */
$(document).ready(function(){
    /*
     * $('.btn')获取类名为btn的标签
     * click()为点击事件
     */ 
    $('.btn').click(function(){
        //隐藏标签
        $('.btn').hide('slow');
        // 慢慢淡出直达消失
        $('.left').fadeOut('slow');

    })
    
    $('.button').click(function(){
        $('.button').hide('slow');
        // 标签往上收直到消失
        $('.right').slideUp('slow');
    })
    // 设置定时器
    var interval = setInterval("countFuntion()",1000);
    
    $('.start').click(function(){

        if(interval ){
            clearInterval(interval);
            interval = null;
            
        }
        interval = setInterval(countFuntion,1000);
        // 定时器执行的方法
        function countFuntion(){
            var num = $('.count').html();
            num ++;
            $('.count').html(num);
        }
    });
    
    
    /*
     * 停止定时器
     */
    $('.stop').click(function(){

        if(interval){
            clearInterval(interval);
            interval = null;
        }
    });
});