一、广告的自动显示与隐藏

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>广告的自动显示与隐藏</title>

    <style>

        #content{width:100%;height:500px;background:#999}

    </style>

    <!--引入jquery-->

    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

    <script>

        /*

            需求：

                1. 当页面加载完，3秒后。自动显示广告

                2. 广告显示5秒后，自动消失。

            分析：

                1. 使用定时器来完成。setTimeout (执行一次定时器)

                2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display

                3. 使用  show/hide方法来完成广告的显示

         */

        //入口函数，在页面加载完成之后，定义定时器，调用这两个方法

        $(function () {

           //定义定时器，调用adShow方法 3秒后执行一次

           setTimeout(adShow,3000);

           //定义定时器，调用adHide方法，8秒后执行一次

            setTimeout(adHide,8000);

        });

        //显示广告

        function adShow() {

            //获取广告div，调用显示方法

            $("#ad").show("slow");

        }

        //隐藏广告

        function adHide() {

            //获取广告div，调用隐藏方法

            $("#ad").hide("slow");

        }

    </script>

</head>

<body>

<!-- 整体的DIV -->

<div>

    <!-- 广告DIV -->

    <div id="ad" style="display: none;">

        <img style="width:100%" src="../img/adv.jpg" />

    </div>

    <!-- 下方正文部分 -->

    <div id="content">

        正文部分

    </div>

</div>

</body>

</html>

二、抽奖

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jquery案例之抽奖</title>

    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

    <script language='javascript' type='text/javascript'>

        /*

            分析：

                1. 给开始按钮绑定单击事件

                    1.1 定义循环定时器

                    1.2 切换小相框的src属性

                        * 定义数组，存放图片资源路径

                        * 生成随机数。数组索引

                2. 给结束按钮绑定单击事件

                    1.1 停止定时器

                    1.2 给大相框设置src属性

         */

        var imgs = ["../img/man00.jpg",

                    "../img/man01.jpg",

                    "../img/man02.jpg",

                    "../img/man03.jpg",

                    "../img/man04.jpg",

                    "../img/man05.jpg",

                    "../img/man06.jpg",

                    ];

        var startId;//开始定时器的id

        var index;//随机角标

        $(function () {

            //处理按钮是否可以使用的效果

            $("#startID").prop("disabled",false);

            $("#stopID").prop("disabled",true);

           //1. 给开始按钮绑定单击事件

            $("#startID").click(function () {

                // 1.1 定义循环定时器 20毫秒执行一次

                startId = setInterval(function () {

                    //处理按钮是否可以使用的效果

                    $("#startID").prop("disabled",true);

                    $("#stopID").prop("disabled",false);

                    //1.2生成随机角标 0-6

                    index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999

                    //1.3设置小相框的src属性

                    $("#img1ID").prop("src",imgs[index]);

                },20);

            });

            //2. 给结束按钮绑定单击事件

            $("#stopID").click(function () {

                //处理按钮是否可以使用的效果

                $("#startID").prop("disabled",false);

                $("#stopID").prop("disabled",true);

               // 1.1 停止定时器

                clearInterval(startId);

               // 1.2 给大相框设置src属性

                $("#img2ID").prop("src",imgs[index]).hide();

                //显示1秒之后

                $("#img2ID").show(1000);

            });

        });

    </script>

</head>

<body>

<!-- 小像框 -->

<div style="border-style:dotted;width:160px;height:100px">

    <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>

</div>

<!-- 大像框 -->

<div

        style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">

    <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>

</div>

<!-- 开始按钮 -->

<input

        id="startID"

        type="button"

        value="点击开始"

        style="width:150px;height:150px;font-size:22px">

<!-- 停止按钮 -->

<input

        id="stopID"

        type="button"

        value="点击停止"

        style="width:150px;height:150px;font-size:22px">

</body>

</html>

jQuery高级案例的更多相关文章

  1. JQuery高级(一)

    JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing], ...

  2. JQuery高级笔记

    ## 今日内容:     1. JQuery 高级         1. 动画         2. 遍历         3. 事件绑定         4. 案例         5. 插件 ## ...

  3. JQuery 高级

    来源于传智播客老师发的笔记 今日内容: 1. JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默 ...

  4. jquery插件开发继承了jQuery高级编程思路

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  5. jQuery高级编程

    jquery高级编程1.jquery入门2.Javascript基础3.jQuery核心技术 3.1 jQuery脚本的结构 3.2 非侵扰事JavaScript 3.3 jQuery框架的结构 3. ...

  6. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  7. C++/C# 开发高级案例资料一次送！关注加群领取哦！

    目前C/C++.C#.JAVA等语言开发的在线教育比较火爆,但小编所见的讲解高级案例的非常少,切合市场需求的较少.而且针对铁路.公路.建筑.市政.制造业等所有工业计算机辅助设计的开发技术和案例几乎没有 ...

  8. jQuery常见案例

    jQuery常见案例 通过jQuery实现全选,反选取消: 选择 地址 端口 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> ...

  9. jquery高级编程学习

    jquery高级编程 第1章.jQuery入门 类型检查 对象 类型检查表达式 String typeof object === "string" Number typeof ob ...

随机推荐

  1. golang学习笔记 go 相关命令

    go build 命令一些可选项的用途和用法 在运行go build命令的时候,默认不会编译目标代码包所依赖的那些代码包.当然,如果被依赖的代码包的归档文件(*.a)不存在,或者源码文件有了变化,那么 ...

  2. 《 .NET并发编程实战》阅读指南 - 第14章

    先发表生成URL以印在书里面.等书籍正式出版销售后会公开内容.    

  3. LinQ in 写法

    有时候会碰到一个需求,又一堆id 1,2,3,4,循环遍历id再去数据库查不仅效率低,而且代码难看,可以用in来实现: string[] codes = item.ExamPaperCode.Spli ...

  4. [转] Nginx配置中的location、root、alias

    Nginx配置中的location.root.alias location & root 初始配置 [root@adailinux vhost]# cat rio.conf server { ...

  5. 用友 UIFrom

    任何表单,有两个字段是必须的,一个是ID,一个是版本号

  6. C# Moq

    Moq 1 My Cases 1.1 简单入门 2 Reference 2.1 Methods 2.2 Matching Arguments 2.3 Properties 2.4 Events 2.5 ...

  7. SpringBoot项目解决全局响应返回中文乱码问题

    一.问题 新建的基于SpringBoot的MVC项目,在请响应体中,如果有中文,会显示为乱码. 二.解决方案 1.在application.properties中设置: spring.http.enc ...

  8. Python渗透测试工具库

    漏洞及渗透练习平台 WebGoat漏洞练习平台: https://github.com/WebGoat/WebGoat webgoat-legacy漏洞练习平台: https://github.com ...

  9. 小程序动态设置style，使用内部数据

  10. VMware + CentOS 7搭建环境（二）

    1．环境要求建议使用VMwareWorkstation虚拟机软件:可以使用快照功能,保存虚拟机状态:本文档示例版本10.0.1:1.2 CentOS系统的iso文件; 下载好的.iso的压缩文件格式, ...