广告样式当页面加载后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. mpstat

    mpstat--multiprocessor statistics,统计多处理器的信息 1.安装mpstat工具 [root@localhost ~]# yum install sysstat 2:展 ...

  2. [C#.net]连接Oracle的几种方式

    一:通过System.Data.OracleClient(需要安装Oracle客户端并配置tnsnames.ora)1. 添加命名空间System.Data.OracleClient引用2. usin ...

  3. [转载]from __future__ import的用法

    一句话概况:这是为了在低版本python中使用高版本特性而引入的,最常用的就是print_function来实现在2.x中使用3.x中的print()命令,从而避免在切换版本时修改代码. https: ...

  4. kali安装dnsdict6

    https://src.fedoraproject.org/lookaside/pkgs/thc-ipv6/thc-ipv6-2.7.tar.gz/2975dd54be35b68c140eb2a6b8 ...

  5. css3常用样式

    .box{ //改变轴的方向 flex-direction:column; //两端对齐 justify-content:space-between; //换行 flex-wrap: wrap; // ...

  6. Python自制小时钟，并转换为exe可执行程序详解

    一,简介Python写完程序,要靠命令来执行太LOW,太低调了,还不华丽了. 再说别人的电脑,都没有Python库,怎么执行,还能不能愉快的一起玩耍了. 所以哪怕只会写一个HelloWorld,也要弄 ...

  7. JVM学习笔记（一，待整理）

    1. 2. 3. 4.-Xint.-Xcomp.-Xmixed 在解释模式(interpreted mode)下,-Xint标记会强制JVM执行所有的字节码,当然这会降低运行速度,通常低10倍或更多. ...

  8. 在已有lnmp环境的基础上安装PHP7

    Centos7.6系统 已经安装lnmp一键环境 想装个apache跑php7, apache安装在这 https://www.cnblogs.com/lz0925/p/11227063.html 要 ...

  9. 热门前沿知识相关面试问题-android插件化面试问题讲解

    插件化由来: 65536/64K[技术层面上]随着代码越来越大,业务逻辑越来繁杂,所以很容易达到一个65536的天花板,其65536指的是整个项目中的方法总数如果达到这个数量时则不无法创建新的方法了, ...

  10. 什么是DNS

    DNS,或者说域名系统,通常是学习如何配置网站和服务器的一个非常困难的部分.了解 DNS 的工作原理将有助于诊断网络访问的问题,也有助于理解 DNS 系统背后的工作原理. 这篇文章中,我们会讨论一些基 ...