广告的自动显示与隐藏

最新推荐文章于 2021-06-03 15:14:27 发布

YO131

最新推荐文章于 2021-06-03 15:14:27 发布

阅读量563

点赞数

分类专栏： Java 文章标签： jquery 前端前端定时器

本文链接：https://blog.csdn.net/qq_33551891/article/details/89195176

版权

Java 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

目的

广告在页面加载完成3s后出现

在出现后5s中自动消失

分析

利用定时器setTimeout

利用jquery的显示和隐藏元素

实现语句

<!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>

        $(function () {
            //定时器3s后执行addShow这个函数
            //当页面加载完3s后自动显示广告
           setTimeout(addShow,3000);
           //当页面加载完5s后自动显示广告
           setTimeout(deleteShow,8000);
        });
        function addShow(){
            $("#ad").show();
        }
        function deleteShow(){
            $("#ad").hide();
        }

    </script>
</head>
<body>
<!-- 整体的DIV -->
<div>
    <!-- 广告DIV -->
    <!--因为style定义成立display所以不会显示-->
    <div id="ad" style="display: none;">
        <img  style="width:100%" src="../img/adv.jpg" />
    </div>

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

可以看到 <div id="ad" style="display: none;">即最开始此代码块设置为不可见

在浏览器中F12查看

广告未弹出时： <div id="ad" style="display: none;">

3s后广告弹出 <div id="ad" style>

5s后也是定时器定时8s后（前3s是等待广告弹出）：<div id="ad" style="display: none;">

YO131

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
广告的自动显示与隐藏

目的广告在页面加载完成3s后出现在出现后5s中自动消失分析利用定时器setTimeout利用jquery的显示和隐藏元素实现语句<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>广告的自动显示与隐藏</title&gt...
复制链接

扫一扫

专栏目录