When you open the app, there is a 3-second or 5-second advertisement page.

When we use apps in our lives, we often encounter a 3-second or 5-second advertisement page when we open the app. Although there is a skip button, we still don’t like this operation. The implementation method is very simple, so let’s analyze and imitate it today.

Advertising page

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>广告页</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #ad {
      width: 100vw;
      height: 100vh;
      position: relative;
    }

    #ad img {
      width: 100vw;
      height: 100vh;
    }

    #ad p {
      width: auto;
      padding: .1333rem .2667rem;
      color: #fff;
      position: absolute;
      top: .8rem;
      right: .5333rem;
      font-size: .3733rem;
      background-color: red;
      border-radius: .1067rem;
    }
  </style>

  <!--引入jquery-->
  <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
  <!--引入移动端适配-->
  <script src="./js/flexible.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>
  <!-- 广告DIV -->
  <div id="ad">
    <img id="bigImg" src="" />
    <p class="timer">跳过3</p>
  </div>
</body>
<script>
  var datatime = document.getElementsByClassName('timer')[0]
  var time = 3
  x()
  setInterval(x, 1000)
  function x() {
    if (time == 0) {
      window.location.href = 'home.html'  //时间结束跳转的页面
    } else {
      datatime.innerHTML = '跳过' + time
      time--
    }
  }
  $('.timer').click(function () {    //点击跳过按钮直接进入页面
    window.location.href = 'home.html'
  })
  $('#bigImg').click(function () {    //点到广告直接去跳转的地址
    window.location.href = 'home.html'   //去广告页
  })

   
//数组中存放的是广告图片地址，随机选一张
  var arr = ['https://img.zmtc.com/2020/0612/20200612103508976.jpg', 'https://img.zmtc.com/2020/0612/20200612103507108.jpg', 'https://img.zmtc.com/2020/0612/20200612103505442.jpg']
  var index = Math.floor((Math.random() * arr.length));
  console.log(arr[index]);

  $('#bigImg').attr('src', arr[index])
</script>

</html>

Then we need to consider that the user cannot return to the previous page after we jump to the page. At this time, we need to make preparations on the target page. Do something on the target page to disable returning to the previous page.

<!-- 禁止返回上一个页面 -->
<script type="text/javascript">
  $(function () {
    if (window.history && window.history.pushState) {
      $(window).on('popstate', function () {
        window.history.pushState('forward', null, '#');
        window.history.forward(1);
      });
    }
    window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
    window.history.forward(1);
  })
</script>

When you open the app, there is a 3-second or 5-second advertisement page.

Guess you like