zoukankan      html  css  js  c++  java
  • 使用JS定时弹出广告

    使用js实现定时广告弹出

    我们可以使用js来实现广告的定时弹出与消失,在介绍思路前,先学习一个css样式:display,  display:block,以块级的元素方式显示; display:none,不显示元素,这其实就是广告的弹出与隐藏的原理。现在来简单介绍一下思路。

    第一步:找到要显示和隐藏的标签,添加id方便使用javascript时能很快找到该标签,例如:

    <div id="adDiv" style="100%;display:none;">
                    <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%">
    </div>

    第二步:分析事件类型,据分析该事件应为onload事件

    第三步:编写函数

                //使用匿名函数加载事件
    window.onload = function(){ // 设置定时: time = window.setInterval("show()",5000); } // 显示广告的方法 function show(){ // 获得广告的div元素: var adDiv = document.getElementById("adDiv"); adDiv.style.display = "block"; window.clearInterval(time);//显示一次后,清空显示的定时设置 time = window.setInterval("hide()",5000);//设置隐藏的定时设置 } // 隐藏广告的方法: function hide(){ // 获得广告的div元素: var adDiv = document.getElementById("adDiv"); adDiv.style.display="none";//隐藏一次后,清空隐藏的定时设置 window.clearInterval(time);//设置显示的定时设置 }
  • 相关阅读:
    深度学习实战 Tricks
    Latex 琐碎
    Latex 琐碎
    数据网站(数据集的获取)、打分网站
    数据网站(数据集的获取)、打分网站
    matplotlib —— 添加文本信息(text)
    hdu 1506 Largest Rectangle in a Histogram
    poj2007
    OpenRisc-43-or1200的IF模块分析
    RHEL 6.4 安装svn和apache
  • 原文地址:https://www.cnblogs.com/ithome0222/p/10688338.html
Copyright © 2011-2022 走看看