原生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)