打开app的时候有一个3秒或者5秒的广告页

我们在生活中使用app的时候，经常遇到打开app的时候有一个3秒或者5秒的广告页，虽然有跳过按钮，但是仍然不太喜欢这个操作。实现的方法很简单，那么今天就分析模仿一下。

广告页

<!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>

然后我们需要考虑我们跳转完页面后用户不能返回上一个页面，这时我们就需要在目标页做一下准备。在目标页面做一下禁止返回上一个页面的操作。

<!-- 禁止返回上一个页面 -->
<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>

打开app的时候有一个3秒或者5秒的广告页

猜你喜欢