<!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="data: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;

        }

    });

});

jQuery框架的简单使用（H5）的更多相关文章

  1. 使用dom元素和jquery元素实现简单增删改的练习

    软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...

  2. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  3. jQuery框架开发一个最简单的幻灯效果

    在线演示 在这个课程中,我们将介绍如何使用jQuery来开发一个最简单的图片幻灯效果. 立刻观看互动课程:jQuery框架开发一个最简单的幻灯效果 阅读原文:jQuery框架开发一个最简单的幻灯效果

  4. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  5. jQuery系列 第四章 jQuery框架的选择器

    第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...

  6. jQuery系列 第八章 jQuery框架Ajax模块

    第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是Ajax实现的关键,发送异步请求.接收服务器端的响应以及执 ...

  7. jQuery系列 第七章 jQuery框架DOM操作

    第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...

  8. jQuery系列 第六章 jQuery框架事件处理

    第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...

  9. jQuery系列 第五章 jQuery框架动画特效

    第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...

随机推荐

  1. 如何用Apache POI操作Excel文件-----如何对一个单元格加注解？

    有的时候,我们需要通过操作Apache POI,在生成Cell数据的同时,能对其生成的Cell,加上注解(comments),类似于下面的. 那么对于这种情况,我们的代码应该如何写呢? 借花献佛,我就 ...

  2. hdu1078 记忆化搜索

    /* hdu 1078 QAQ记忆化搜索 其实还是搜索..因为里面开了一个数组这样可以省时间 (dp[x][y]大于0就不用算了直接返回值) */ #include<stdio.h> #i ...

  3. Windows上python开发--2安装django框架

    Windows上python开发--2安装django框架 分类: 服务器后台开发2014-05-17 21:22 2310人阅读 评论(2) 收藏 举报 python django 上一篇文章中讲了 ...

  4. PHP程序员函数注释规格(麻烦大家遵守)

    PHP程序员函数注释规格(麻烦大家遵守)   以前我也不愿意写注释,但是2个月后发现自己写的什么都不知道了.. 为了宇宙的发展,为了二次开发的便捷,为了代码的可读性,建议大家把注释写好.. <? ...

  5. Front-end Developer Interview Questions

    Front-end-Developer-Interview-Questions A list of helpful front-end related questions you can use to ...

  6. ESXi云管理平台

    实验室有多台使用ESXi实现虚拟化的服务器,平时管理不便,便通实验室其他同学一起编写了一个基于ESXi的云平台管理系统. 对物理服务器进行管理,实现增加.删除.修改.性能监控. 对虚拟机进行管理,实现 ...

  7. font awesome

    http://stackoverflow.com/questions/21406538/how-to-use-font-awesome-icons-from-node-modules

  8. Delphi XE5 如何与其他版本共存

    如果你想使用Delphi诸如XE4.XE3.XE2.XE之类的版本跟Delphi XE5共存的话,在cglm.ini中简单修改两行就行啦. 找到Delphi XE5的安装根目录C:\Program F ...

  9. python中的类，对象，方法，属性等介绍

    注:这篇文章写得很好.加底纹的是我自己的理解 python中一切皆为对象,所谓对象:我自己就是一个对象,我玩的电脑就是对象,坐着的椅子就是对象,家里养的小狗也是一个对象...... 我们通过描述属性( ...

  10. linux下时间的修改

    1.关于时间的修改,在linux还是很重要的,在这里只是介绍一个简单的常用的命令,并且时间不会写入到系统. 2.命令 3.如果想把时间写进系统 修改完成之后,输入clock -w 时间将会被写进CMO ...