广告样式当页面加载后5s刷新在右下角

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>Gary图片轮播</title>

        <style type="text/css">

            #ad{

                width:300px;

                height: 300px;

                background-color:antiquewhite;

                /*绝对定位放置到浏览器右下角，即使有下拉条时广告弹窗也不会改变位置*/

                position: fixed;

                bottom:0px;

                right: 0px;

                display: none;

            }

        </style>

        <script type="text/javascript">

            function init(){

                setTimeout(showAd,2000)

            }

            function showAd(){

                var ad = document.getElementById("ad");

                ad.style.display ="block";

            }

            function closeAd(){

                var ad = document.getElementById("ad");

                ad.style.display ="none";

            }

        </script>

    </head>

    <body onload="init()">

            <div id="ad">

                <button onclick="closeAd()">关闭</button>

            </div>

    </body>

</html>

Gary-图片轮播.html

实现过程

　　设置广告弹窗样式，将广告样式固定与页面右下角

    <body onload="init()">

            <div id="ad">

            </div>

    </body>
<style type="text/css">

            #ad{

                width:300px;

                height: 300px;

                background-color:antiquewhite;

                /*绝对定位放置到浏览器右下角，即使有下拉条时广告弹窗也不会改变位置*/

                position: fixed;

                bottom:0px;

                right: 0px;

                /*display: none;*/

            }

        </style>

　　设置广告每隔5秒显示出来

            function init(){

                setTimeout(showAd,2000)

            }

            function showAd(){

                var ad = document.getElementById("ad");

                ad.style.display ="block";

            }

　　添加Button按钮实现广告的关闭

    <body onload="init()">

            <div id="ad">

                <button onclick="closeAd()">关闭</button>

            </div>

    </body>
            function closeAd(){

                var ad = document.getElementById("ad");

                ad.style.display ="none";

            }

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>Gary图片轮播</title>

        <style type="text/css">

            #ad{

                width:300px;

                height: 300px;

                background-color:antiquewhite;

                /*绝对定位放置到浏览器右下角，即使有下拉条时广告弹窗也不会改变位置*/

                position: fixed;

                bottom:0px;

                right: 0px;

                display: none;

            }

        </style>

        <script type="text/javascript">

            function init(){

                setTimeout(showAd,2000)

            }

            function showAd(){

                var ad = document.getElementById("ad");

                ad.style.display ="block";

            }

            function closeAd(){

                var ad = document.getElementById("ad");

                ad.style.display ="none";

            }

        </script>

    </head>

    <body onload="init()">

            <div id="ad">

                <button onclick="closeAd()">关闭</button>

            </div>

    </body>

</html>

Gary-图片轮播.html

原生Js_实现广告弹窗的更多相关文章

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

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

  2. js广告弹窗

    生活中我们经常遇到一些烦人的广告页面,比方说弹窗,悬浮等等各种广告.有的同事甚至都下一个屏蔽广告插件到浏览器上.这样就防止了广告的干扰. 但是我们学前端的必须是要知道广告弹窗这个做的过程,甚至是它的原 ...

  3. jQuery实现广告弹窗

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

  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. 谷歌chrome浏览器www.tradeadexchange.com广告弹窗跳转劫持病毒

    近期大量网友出现chrome浏览器被劫持的情况,表现如下:           ·  点击(访问)任意网站任意链接均有概率弹出www.tradeadexchange.com.           ·  ...

  7. 原生 js 模拟 alert 弹窗

    复制头部的 js 代码到你的 js 文件的任何地方,调用Chef.alert方法传入相应的参数即可并没有什么功能,只是一个提示的作用,可能样式比 alert 的弹窗好看点,css是写在js里的,只要你 ...

  8. css广告弹窗满屏跑

    window.onload=function(){ //广告滚动 var oneInner = $('#divid')[0]; //定时器 var a1a = setInterval(moves,10 ...

  9. 原生js控制控制--弹窗的显示和隐藏

    以防浪费大家的时间,还是先上效果图吧,满足您的需求就往下look吧. 重要知识点:点击其他地方,也就是除了小叉子之外的地方也能够关闭弹窗哦.代码已标红    html代码: <button id ...

随机推荐

  1. WPF 遍历资源字典中的控件

    object obItem=this.FindResource("canvasdt"); if (obItem is System.Windows.DataTemplate) { ...

  2. SQL的GROUP BY 与 Order By

    1.概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.原始表 3.简 ...

  3. 【JavaScript】js中的call方法

    moziila官方文档链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Funct ...

  4. CSS选择器（通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器）

    通配符选择器  *   与任何元素匹配 派生选择器: 后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素 A B    对A元素中的B元素应用样式 后代选择器中两个元素间的层次间隔可以是无 ...

  5. java字符常量

    在Java程序中经常会遇到类似于"Hello"这样地字符串,那么这种类型的字符串是Java中是如何存储,下面就说明字符串常量在内存中存储方式: Java程序在编译时会将程序中出现的 ...

  6. Spring MVC之@RequestParam @RequestBody @RequestHeader 等详

    Spring MVC之@RequestParam @RequestBody @RequestHeader 等详     引言: 接上一篇文章,对@RequestMapping进行地址映射讲解之后,该篇 ...

  7. Java数据结构浅析

    程序 = 数据结构 + 算法 本文概述Java中常用的数据结构,并简述其使用场景 1. 数据结构的定义 数据结构是一种逻辑意义,指的是逻辑上的数据组织方式及相应的处理,与数据在磁盘的具体存储方式不完全 ...

  8. STM32 HSE模式配（旁路模式、非旁路模式）

    1.外部晶体/陶瓷谐振器(HSE晶体)模式 这种模式用得比较常见,HSE晶体可以为系统提供较为精确的时钟源.在时钟控制寄存器RCC_CR中的HSERDY位用来指示高速外部振荡器是否稳定.在启动时,直到 ...

  9. 关于C语言打印string类字符串的问题

    首先因为printf函数输出字符串是针对char *的,即printf只能输出c语言的内置数据,而string不是c语言的内置数据. 其次string类型的对象不止包含字符串,还包含了许多用于操作的函 ...

  10. Python3.8新特性-- 海象操作符

    “理论联系实惠,密切联系领导,表扬和自我表扬”——我就是老司机,曾经写文章教各位怎么打拼职场的老司机. 不记得没关系,只需要知道:有这么一位老司机, 穿上西装带大家打拼职场! 操起键盘带大家打磨技术! ...