zoukankan      html  css  js  c++  java
  • javascript实战——广告弹窗实现

    效果展示:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>标题</title>
     6     <style type="text/css">
     7         #ad{
     8             width: 300px;
     9             height: 300px;
    10             background-color: aquamarine;
    11             position: fixed;
    12             bottom: 0px;
    13             right: 0px;
    14             display: none;
    15         }
    16     </style>
    17     <script type="text/javascript">
    18         function init() {
    19             window.setTimeout(showAd,2000)
    20         }
    21         function showAd() {
    22             var ad = document.getElementById("ad");
    23             ad.style.display="block";
    24         }
    25         function closeAd() {
    26             var ad = document.getElementById("ad");
    27             ad.style.display="none";
    28         }
    29     </script>
    30 </head>
    31 <body onload="init()">
    32     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    33     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    34     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    35     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    36     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    37     <div id="ad">
    38         <button onclick="closeAd()">关闭</button>
    39     </div>
    40 </body>
    41 </html>
  • 相关阅读:
    this.$route和this.$router的区别
    IE不支持 Promise 解决办法
    滚动定位的多种方法
    css设置禁止文字被选中
    input标签内容改变的触发事件
    webpack-dev-server配置指南webpack3.0
    Object.keys方法之详解
    mac安装webpack失败
    vue2使用animate css
    http
  • 原文地址:https://www.cnblogs.com/zzmx0/p/12575419.html
Copyright © 2011-2022 走看看