原生Js_实现广告弹窗

本文转载自查看原文 2019-02-28 23:26 828 JavaScript

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 js实现广告弹窗原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等 js_原生js实现上拉加载更多的功能。原生Js_实现简单的下拉折叠菜单(添加弹出动画效果) 原生 js 模拟 alert 弹窗 js_实现给未来元素添加事件。一行js弹窗代码就能设计漂亮的弹窗广告 Js_实现3D球体旋转 WPF实现消息提醒（广告弹窗）最简单的轮播广告(原生JS)