javascript实现倒计时关闭广告

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

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

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

代码如下：

!DOCTYPE htML>
    html lang="en">
    head>
     meta charset="UTF-8">
     tITle>
    Title/title>
     style>
 .djs{
     width: 30px;
     height: 30px;
     position: absolute;
     left: 700px;
     color: white;
     background-color: darkred;
 }
 .end{
     display: none;
 }
     /style>
    /head>
    body>
    div class="djs">
    /div>
    img class="ad" src="../images/1.png" alt="">
    div class="end">
    广告已结束/div>
    script>
 //5秒关闭广告 VAR ad=document.querySelector('.ad') var div=document.querySelector('.djs') var end=document.querySelector('.end') var t=5 fun() setInterval(fun,1000) function fun() {
 div.innerHTML=t if (t==0){
 ad.style.display='none' div.style.display='none' end.style.display='block' }
 t-- }
    /script>
    /body>
    /html>
    

演示效果：

右上角便是倒计时

代码解释：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！