javascript - 使用javascript实现倒计时关闭广告

前端之家收集整理的这篇文章主要介绍了javascript - 使用javascript实现倒计时关闭广告前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

用Javascript实现倒计时关闭广告案例

正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教

在很多app与网页中,我们可以看到这样的广告:进入某个网站后,会弹出一个广告,然后广告会有倒计时,倒计时结束,这个广告便会消失,下面我们用代码来实现这一功能

代码解释:

这里就是先创建个函数,设置个全局变量t,然后t就是倒计时的时间,我们在倒计时函数里面将div里面显示文字改为我们的倒计时t,然后来判断t是否等于0,如果等于0,那么倒计时结束,将图片与倒计时盒子隐藏,显示广告已结束的盒子。

代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <Meta charset="UTF-8">
  5.  <title>编程之家 jb51.cc 使用javascript实现倒计时关闭广告</title>
  6.  <style>
  7.  .djs{
  8.  width: 30px;
  9.  height: 30px;
  10.  position: absolute;
  11.  left: 700px;
  12.  color: white;
  13.  background-color: darkred;
  14.  }
  15.  .end{
  16.  display: none;
  17.  }
  18.  </style>
  19. </head>
  20. <body>
  21. <div></div>
  22. <img src="../images/1.png" alt="">
  23. <div>广告已结束</div>
  24. <script>
  25.  //5秒关闭广告
  26.  var ad=document.querySelector('.ad')
  27.  var div=document.querySelector('.djs')
  28.  var end=document.querySelector('.end')
  29.  var t=5
  30.  fun()
  31.  setInterval(fun,1000)
  32.  function fun() {
  33.  div.innerHTML=t
  34.  if (t==0){
  35.  ad.style.display='none'
  36.  div.style.display='none'
  37.  end.style.display='block'
  38.  }
  39.  t--
  40.  }
  41. </script>
  42. </body>
  43. </html>

猜你在找的JavaScript相关文章