定时弹出广告

Posted yisennnn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了定时弹出广告相关的知识,希望对你有一定的参考价值。

定时器(BOM-window对象)

  setInterval(code,毫秒数):周期执行

  setTimeout(code,毫秒数):延迟多长事件后,只执行一次

  清除定时器:

    clearInterval(id):

    clearTimeout(id):

步骤分析:

  1.html页面,先把广告隐藏

  2.页面加载成功事件 onload

  3.编写函数

    定时器

技术图片
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .ad{
                display: none;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div>
            show ad
        </div>
        <div id="ad" class="ad">
            <img src="../img/ad_.jpg"/>
        </div>
    </body>
    <script>
        //记录次数
        var i = 0;
        
        //定时器id
        var timer;
        
        onload = function(){
            //设置定时器,间隔4秒展示图片
            timer = setInterval(showAd,4000);
        }
        
        //展示广告方法
        function showAd(){  
            //展示的次数+1
            i++;
            
            //若i=3清空由setInterval设置的定时器
            if(i==3){
                clearInterval(timer);
            }
            
            //1.获取广告
            var adobj = document.getElementById("ad");
            //2.修改广告的样式将其显示
            adobj.style.display ="block";
            //3.2秒之后隐藏,只执行一次
            setTimeout(hidAd,2000);
        }
        
        //隐藏广告
        
        function hidAd(){
            //1.获取广告
            var adobj = document.getElementById("ad");
            //2.修改广告的样式将其隐藏
            adobj.style.display = "none";
        }
    </script>
</html>
定时弹出广告

 

    操作元素:

      document.getElementById("")

    操作css属性:

      document.getElementById("id").style.属性=“值”

      属性:就是css中属性,css属性有“-” 例如:background-color

        若有“-” 只需将“-”删除,后面第一个字母变大写即可。

技术图片
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //点击按钮之后,给id为divid的元素添加边框背景色宽高
            function btncli(){
                //1.获取元素
                var obj = document.getElementById("divid");
                
                //2.操作元素
                obj.style.backgroundColor = "black";
                obj.style.border = "1px solid red";
                
                //添加宽高
                obj.style.height = "100px";
                obj.style.width = "100px";
                
            }
        </script>
    </head>
    <body>
        <input type="button" value="将div加上样式"  onclick="btncli()"/>
        <div  id="divid" ></div>
    </body>
</html>
js修改样式

   注意:

    只要是window对象的属性和方法,可以把window省略

      window.onload == onload

      window.setInterval() == setInterval()

 

以上是关于定时弹出广告的主要内容,如果未能解决你的问题,请参考以下文章

定时弹出广告

JavaScript学习——完成页面定时弹出广告

使用jquery完成定时弹出广告图片

使用JQuery完成页面定时弹出广告

定时弹出广告(图片)

用css怎么写弹出广告代码,JS也可以,求大神