JQuery案例_广告显示和隐藏

  • 需求：
    • 当页面加载完，3秒后自动显示广告
    • 广告显示5秒后，自动消失
  • 分析：
    • 使用定时器来完成。setTimeout(执行一次定时器)
    • 分析发现JQuery的显示和隐藏动画效果气势就是控制display
    • 使用 show/hide方法来完成广告的显示
<!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.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
        /**
         * 需求：
         *  当页面加载完，3秒后自动显示广告
         *  广告显示5秒后，自动消失
         *
         * 分析：
         *   使用定时器来完成。setTimeout(执行一次定时器)
         *   分析发现JQuery的显示和隐藏动画效果气势就是控制display
         *   使用 show/hide方法来完成广告的显示
         */

        //入口函数在页面加载完成后定义定时器调用显示和隐藏方法
        $(function () {
            setTimeout(adShow, 3000);
            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="/html/JQuery高级/img/adv.jpg" />
    </div>

    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>

JQuery案例_抽奖

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽奖</title>
    <script charset="utf-8" src="/js/jquery-3.6.0.min.js" type="text/javascript" type="text/javascript"></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 height="500px" id="img2ID" src="../img/man00.jpg" width="800px"/>
</div>

<!-- 开始按钮 -->
<input
        id="startID"
        onclick="imgStart()"
        style="width:150px;height:150px;font-size:22px"
        type="button"
        value="点击开始">

<!-- 停止按钮 -->
<input
        id="stopID"
        onclick="imgStop()"
        style="width:150px;height:150px;font-size:22px"
        type="button"
        value="点击停止">


<script language='javascript' type='text/javascript'>
    /*
        分析：
        给开始的按钮绑定单击事件
            定义循环定时器
            切换小相框的src属性
                定义数组存放图片资源路径
                生成随机数，数组索引

         给结束按钮绑定单击事件
            停止定时器
            给大相框设置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;
    var index;

    $(function () {
        $("#startID").prop("disabled", false);
        $("#stopID").prop("disabled", true);

        //给开始按钮绑定单击事件
        $("#startID").click(function () {
            startId = setInterval(function () {
                $("#startID").prop("disabled", true);
                $("#stopID").prop("disabled", false);
                index = Math.floor(Math.random() * 7);
                $("#img1ID").prop("src", imgs[index])
            }, 20);
        });
        //给结束按钮绑定单击事件
        $("#stopID").click(function () {
            $("#startID").prop("disabled", false);
            $("#stopID").prop("disabled", true);
            clearInterval(startId);
            $("#img2ID").prop("src", imgs[index])
        });
    });


</script>
</body>
</html>
版权声明：本文为java原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/ailhy/p/16607397.html