生活中我们经常遇到一些烦人的广告页面,比方说弹窗,悬浮等等各种广告。有的同事甚至都下一个屏蔽广告插件到浏览器上。这样就防止了广告的干扰。

但是我们学前端的必须是要知道广告弹窗这个做的过程,甚至是它的原理。

下面是我自己做的一个小案例,希望能够帮助到大家。当然,有不妥当的地方,还望多多指教。谢谢!

HTML代码部分:

 <div id="popup">
<p>广告文字 广告文字 广告文字 </p>
<span id="dele">X</span>
</div>

CSS代码部分:

 <style type="text/css">
*{margin: 0;padding: 0;}
html{width: 100%;}
body{width: 100%;position: relative;}
#popup{width: 310px;height: 144px;
background-color: yellowgreen; position: fixed;
left: 50%;top: 50%;margin-left: -155px;
margin-top: -72px;display: none;}
p{text-align: center; line-height: 144px;}
span{
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
background-color: red;
text-align: center;
cursor: pointer; }
</style>

JS代码部分:

 <script type="text/javascript">
var Pop = document.getElementById("popup");
var Dele = document.getElementById("dele");
window.onload = function(){ Pop.style.display = "block"; Dele.onclick = function(){
Pop.style.display = "none"; setTimeout(function(){
Pop.style.display = "block";
},3000)
}
}
</script>

最终效果如下图所示:

js广告弹窗的更多相关文章

  1. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  2. jQuery实现广告弹窗

    首先设置一个固定的窗口位于右下角,效果如下: 代码: jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下: <!DOCTYPE ht ...

  3. js右下角弹窗代码(实测好用)

    实测好用的js右下角弹窗代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  4. jquery.cookie广告弹窗点击关闭后一天弹一次

    jquery.cookie广告弹窗点击关闭后一天弹一次 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  5. JQ广告弹窗&随机抽奖————JQ

    1.JQ广告弹窗 <div id="flo"> <img src="image.jpeg"> </div> <scri ...

  6. js解决弹窗问题实现班级跳转DIV示例

    js解决弹窗问题实现班级跳转DIV 1.js代码如下: <%--实现班级跳转DIV--%>  <div id="displayClassDiv" style=&q ...

  7. js写弹窗

    1.先来看弹窗的模样 点击“弹出窗口”后会弹出下面窗口 2.下面是实现弹出窗口的代码,其中引入的jquery一般自己有,没有的话可以从网上下载.tanchuang.js和tanchuang.css写在 ...

  8. 一段简单的顶部JS广告

    一段简单的顶部JS广告 <SCRIPT LANGUAGE="JavaScript"> ; ; images = new Array; images[] = new Im ...

  9. 原生Js_实现广告弹窗

    广告样式当页面加载后5s刷新在右下角 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

随机推荐

  1. POJ 1195 二维树状数组

    Mobile phones Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 18489   Accepted: 8558 De ...

  2. FK JavaScript之:ArcGIS JavaScript添加Graphic,地图界面却不显示

    使用ArcGIS JavaScript,往地图中添加几个Graphic,基本是与官网示例代码一致.绘制的图形一闪而过之后,就没了 核心代码如下: iniToolBar: function () { t ...

  3. JS开发HTML5游戏《神奇的六边形》(二)

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  4. 安装redis时遇到zmalloc.h:50:31: 致命错误:jemalloc/jemalloc.h:没有那个文件或目录

    参考博文,http://www.phperz.com/article/14/1219/42002.html 解决办法 make MALLOC=libc

  5. cms修改栏目单页样式错位调整

    if (dt.Rows[0]["ClassTemplet"].ToString().Trim() == "") { rows_key.Style.Value = ...

  6. Windows2003中IIS的安全设置技巧

    在Windows Server 2003中对于IIS的安全设置具有十分重要的意义,所以掌握IIS安全设置的六大技巧是一个网管员必备的基本技能.下面就是对IIS的安全设置的六大技巧. 技巧1.安装系统补 ...

  7. ThinkPHP3.2.3 自定义标签库的使用

    ThinkPHP 3.2.3 手册中标签库驱动的地址是: http://www.kancloud.cn/manual/thinkphp/1859 标签库的地址是:http://www.kancloud ...

  8. Memcached 笔记与总结(9)Memcached 与 Session

    一.Memcached 存储 Session 由于 Memcached 是分布式的内存对象缓存系统,因此可以用来实现 Session 同步:把 Web 服务器中的内存组合起来,成为一个“内存池”,不管 ...

  9. lr并发量和迭代的区别

    1.并发量 并发量也就是同时运行的量.比如100个用户同时登录,那么并发量就是100.当然这100个用户可以进行参数化,也可以采用设置虚拟用户数(vuser). 2.迭代 迭代就是单个用户运行的次数. ...

  10. 并发队列ConcurrentLinkedQueue和阻塞队列LinkedBlockingQueue用法

    在Java多线程应用中,队列的使用率很高,多数生产消费模型的首选数据结构就是队列(先进先出).Java提供的线程安全的Queue可以分为阻塞队列和非阻塞队列,其中阻塞队列的典型例子是BlockingQ ...