zoukankan html css js c++ java

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

(如需转载学习，请标明出处)

查看全文

相关阅读:
流行的as3内存释放hack的方法
 干掉这个网页
 Flex元标签笔记Event
javascript for oop
asdoc 注释格式
 怎么比较word文档，怎么比较excel文档
 AS3匿名函数的this指向
 SVN空间
 CodeForces 315.D Sereja and Periods
Html5 filltext

原文地址：https://www.cnblogs.com/1138720556Gary/p/10453952.html