(九)原生js案例之官网开屏弹窗广告

电商网站，淘宝,pdd,其他商城首页都会用到的效果，内容比较简单，可以丰富下交互，关闭按钮之类的，点击关闭手动关闭，否则就在限定时间自动关闭。

效果

代码实现

• 必要的css

#ad{
      width: 800px;
      height: 448px;
      border: 1px solid #ccc;
      background-size: 100% auto;
      background-image: url(./images/1.png);
      background-repeat: no-repeat;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      opacity: 0;
      transition: all 1s ease-in-out;
    }

• 静态页面

<h3 class="d-flex justify-content-center mt-5 ">官网首页的弹窗广告</h3>
  <div id="ad" class="shadow bg-body-tertiary"> 
  </div>

• 逻辑代码

 window.onload =function(){
          const oAd = document.getElementById('ad');
          setTimeout(show,3000)
          function show(){
            oAd.style.opacity = 1;
            setTimeout(hide,3000)
          }
          function hide(){
            oAd.style.opacity = 0;
            if(getStyle(oAd,'opacity') == 0){
              oAd.style.display = 'none';
            }
          }
        }

可以根据自己的业务去做细节丰富等其他的完善