广告样式当页面加载后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. 【原创】大叔经验分享（71）docker容器中使用jvm工具

    java应用中经常需要用到jvm工具来进行一些操作,如果java应用部署在docker容器中,如何使用jvm工具? 首先要看使用的docker镜像, 比如常用的openjdk镜像分为jdk和jre,只 ...

  2. Springboot Hikari Centos 首次连数据库很慢

    前言: springboot项目默认使用了hikari作为数据库连接池,在开发机器上一切正常. 但是把程序部署到Centos7 x64上之后发现,每次首页登录的时候都要停顿几十秒. 于是,在程序启动后 ...

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

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

  4. centos7 修改时区，同步时间，Mysql修改时区

    查看时区 timedatectl status [root@localhost nova-back]# timedatectl status Local time: Thu 2019-05-23 15 ...

  5. 用jquery写出图片自动轮播效果

    相关代码如下,只要把代码粘贴进编辑器,修改图片路径,即可看到效果. 1.html部分 <body>   <ul class="banner">   < ...

  6. 第十三章、元类（metaclass）

    目录 第十三章.元类(metaclass) 一.什么是元类 二.为什么用元类 第十三章.元类(metaclass) 一.什么是元类 在python中一切皆对象,那么我们用class关键字定义的类本身也 ...

  7. java_day07_异常

    第七章: 异常 1.异常概述 在我们日常生活中,有时会出现各种各样的异常,例如:职工小王开车去上班,在正常情况下,小王会准时到达单位.但是天有不测风云,在小王去上班时,可能会遇到一些异常情况,比如小王 ...

  8. imx6 yocto移植 环境搭建

    系统:ubuntu14.04 LTS 切换软件下载源,确保下载资源是最快. 安装必要软件工具: ~$ apt-get install vim ~$ apt-get install openssh-se ...

  9. mysql数据库： 用户管理、pymysql使用、navicat插件使用

    一.用户管理 二.pymysql增删改查 三.sql注入攻击 一.用户管理 数据安全非常重要 不可能随便分配root账户 应该按照不同开发岗位分配不同的账户和权限 mysql中 将于用户相关的数据放在 ...

  10. PAT Basic 1092 最好吃的月饼 (20 分)

    月饼是久负盛名的中国传统糕点之一,自唐朝以来,已经发展出几百品种. 若想评比出一种“最好吃”的月饼,那势必在吃货界引发一场腥风血雨…… 在这里我们用数字说话,给出全国各地各种月饼的销量,要求你从中找出 ...