广告样式当页面加载后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. CAS实现逻辑(JWT)

    由于没有获取正规做CAS的流程,这里根据网上的资料,写了一个自己觉得还可以的方案流程,留着备用 名称介绍: token:用于验证请求是否合法 refreshToken:当token失效后,客户端发送t ...

  2. Linq操作之Except,Distinct,Left Join 【转】

    最近项目中用到了Linq中Except,Distinct,Left Join这几个运算,这篇简单的记录一下这几种情形. Except      基础类型使用Linq的运算很简单,下面用来计算两个集合的 ...

  3. Lab 色彩模型和取值范围

    L∈(0,100) a∈(-128,127) b∈(-128,127) opencv 的Lab数据对齐做了量化,使其处于0-255范围 L=L*2.55 a=a+128 b=b+128

  4. 1 C# 将对象序列化

    public static string ObjectToXml(object obj) { using (MemoryStream memoryStream = new MemoryStream() ...

  5. OSCP-Kioptrix2014-2 漏洞利用

    pChart 2.1.3 文件包含漏洞 搜索漏洞 查看漏洞理由代码: hxxp://localhost/examples/index.php?Action=View&Script=%2f..% ...

  6. element-ui el-table表格排序sortable参数解析

    表格组件的排序功能,点击排序表头可以进行升序和降序进行排序 页面代码,基本上排序的参数都使用了 <el-table :data="tableData" style=" ...

  7. 4.ID主键生成策略

    保证唯一性(auto_increment) 一.xml方式 <?xml version="1.0"?> <!DOCTYPE hibernate-mapping P ...

  8. shell中sed的简单使用

    sed命令行格式为:         sed [-nefri]  ‘command’  输入文本/文件        常用选项:        -n∶取消默认的输出,使用安静(silent)模式.在一 ...

  9. Delphi 图形组件（Shape）

    樊伟胜

  10. 详解python中的描述符

    描述符介绍 总所周知,python声明变量的时候,不需要指定类型.虽然现在有了注解,但这只是一个规范,在语法层面是无效的.比如: 这里我们定义了一个hello函数,我们要求name参数传入str类型的 ...