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

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

查看全文

相关阅读:
[UE4]蓝图中清空变量值或设置为null
[UE4]运行时脱离视角，进入自由视角
 [UE4]扔枪
 [UE4]反射
 为帮助保护你的安全，您的Web浏览器已经限制此文件显示可能访问您的计算机的活动内容
 [UE4]根据名字调用函数（蓝图）
[UE4]移除UI（User Widget）并销毁
 [UE4]Return Node节点好用法
 [UE4]关于分支Sequence和条件分支的组合用法
 [UE4]隐藏对象Set Visibility

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