专栏首页一番码客【JavaScript小项目】弹出广告

【JavaScript小项目】弹出广告

思路分析

  1. 4秒钟之后显示广告,广告显示2秒钟,之后隐藏。
  2. 循环往复3次,广告永远消失。
  3. setInterval(function, timeout ms):每隔多长时间执行一次函数,该定时器会重复执行。
  4. clearInterval():取消定时器,需要传入定时器对象。
  5. setTimeout(function, timeout ms):在指定延时时间后调用函数,该定时器只执行一次。
  6. clearTimeout(): 取消定时器,需要传入定时器对象。

代码实现

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a {
                text-decoration: none;
            }

            .cle {
                clear: both;
            }
            /*logo 部分的div*/

            .header {
                width: 100%;
            }

            .header div {
                float: left;
                width: 33.33%;
                height: 60px;
                line-height: 50px;
            }

            .header a {
                padding: 15px;
            }
            /*菜单部分*/

            .menu {
                width: 100%;
                background-color: #000;
                height: 50px;
                padding-top: 1px
            }

            .menu ul li {
                list-style-type: none;
                display: inline;
            }

            .menu a {
                font-size: 25px;
                color: #fff;
            }
            /*轮播图*/

            .lunbo {
                width: 100%;
                margin-top: 10px;
                margin-bottom: 10px;
            }

            .lunbo img {
                width: 100%;
            }
            /*热门商品*/
            /*.left,.right{
                float:left;
            }*/

            .left {
                float: left;
                width: 16%;
                height: 500px;
            }

            .right {
                float: left;
                width: 84%;
                text-align: center;
                height: 500px;
            }

            .middle {
                float: left;
                width: 50%;
                height: 250px;
            }

            .item {
                float: left;
                width: 16.66%;
                height: 250px;
            }
            /*给广告*/

            .ad1 {
                width: 100%;
            }

            .ad1 img {
                width: 100%;
            }
            /*版权*/

            .foot {
                width: 100%;
            }

            .foot p {
                text-align: center;
            }
        </style>

        <!--
            4秒钟之后显示广告,广告显示2秒钟,之后隐藏
            循环往复3次,广告永远消失
        -->

        <script type="text/javascript">
            var index = 0;
            var timer = null;

            function showAd() {

                index++;

                var adTag = document.getElementById("ad");
                adTag.style.display = "block";

                setTimeout("hideAd()", 2000);

                if(index == 3) {
                    clearInterval(timer);
                }
            }

            function hideAd() {
                var adTag = document.getElementById("ad");
                adTag.style.display = "none";
            }

            window.onload = function() {

                timer = setInterval("showAd()", 4000);

            }
        </script>
    </head>

    <body>
        <div id="ad" style="width:100%;display: none;">
            <img src="../img/ad_.jpg" width="100%" />
        </div>
        <!--
            一个大div中放置8个div
        -->
        <div>
            <!--logo
                嵌套三个div
            -->
            <div class="header">
                <div>
                    <img src="../img/logo.png" height="40px" />
                </div>
                <div>
                    <img src="../img/header.jpg" />
                </div>
                <div>
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>

            <div class="cle"></div>

            <!--菜单-->
            <div class="menu">
                <ul>
                    <li>
                        <a href="#">首页</a>
                    </li>
                </ul>
            </div>

            <!--轮播图-->
            <div class="lunbo">
                <img src="../img/1.jpg" />
            </div>

            <!--热门
                将起划分成两个div
                    左边放图片
                    右边的放商品
            -->
            <div class="hot">
                <!--存放热门商品和一张图片-->
                <div>
                    <h2 style="display: inline;">热门商品</h2>
                    <img src="../img/title2.jpg" />
                </div>
                <div>
                    <!--存放左边的图片-->
                    <div class="left">
                        <img src="../img/big01.jpg" />
                    </div>
                    <!--存放商品图片-->
                    <div class="right">
                        <div class="middle">
                            <img src="../img/middle01.jpg" />
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>

                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>

                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>

                    </div>
                </div>
            </div>

            <div class="cle"></div>

            <!--广告-->
            <div class="ad1">
                <img src="../img/ad.jpg" />
            </div>

            <!--最新-->
            <div></div>

            <!--广告-->
            <div class="ad1">
                <img src="../img/footer.jpg" />
            </div>

            <!--版权foot-->
            <div class="foot">
                <p>
                    <a href="#">关于我们</a>
                </p>
                <p>
                    Copyright &copy; 2010-2020 一番码客 版权所有
                </p>
            </div>

        </div>
    </body>

</html>

效果展示


一番雾语:这就是我们平时讨厌的网页广告。

本文分享自微信公众号 - 一番码客(efonfighting),作者:efonfighting

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【JavaScript小项目】轮播图

    efonfighting
  • electron开发pdf合并工具(一)

    前面我们已经对electron即相关的electron-vue、element-ui等做了一定的了解。

    efonfighting
  • electron开发pdf合并工具(二)

    之前我们做了一个简单的界面,但其实并没有什么功能,今天我们基于前段时间一直在学习的vue相关知识,来实现一些后台逻辑。

    efonfighting
  • 【JavaScript小项目】轮播图

    efonfighting
  • 基于Jsp和Servlet的简单项目

    链接:https://pan.baidu.com/s/1ylOi3PXFy6nwoOyVGVrBeg 提取码:yvsn

    时间静止不是简史
  • HTML5选择器

    czjwarrior
  • Angular 4.x template syntax & common directives

    https://segmentfault.com/a/1190000008625978

    前端博客 : alili.tech
  • 解决bootstrap row span设置border换行的问题

    版权声明:本文为[他叫自己Mr.张]的原创文章,转载请...

    他叫自己MR.张
  • jquery选择器

    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    Devops海洋的渔夫
  • 老雷PHP全栈开发教程之Vue基础教程

    Vue是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,Vue通过数据驱动构建ui界面。

    老雷PHP全栈开发

扫码关注云+社区

领取腾讯云代金券