原生Js_实现广告弹窗

　　广告样式当页面加载后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_实现广告弹窗

猜你喜欢