JavaScript countdown to close ads

Using Javascript to implement countdown to close advertisement

I am still learning the big front end. Please forgive me if there are any irregularities or incorrect ideas in the code. Thank you for your advice.

In many apps and web pages, we can see such ads: after entering a website, an ad will pop up, and then the ad will have a countdown. When the countdown ends, the ad will disappear. Let's use code to implement this function.

The code is as follows:

<!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">The ad has ended</div>
<script>
 //Close the ad in 5 seconds 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>

Demonstration effect:

The countdown is in the upper right corner.

Code explanation:

Here we first create a function and set a global variable t, then t is the countdown time. In the countdown function, we change the text displayed in the div to our countdown t, and then determine whether t is equal to 0. If it is equal to 0, the countdown ends, the picture and the countdown box are hidden, and a box indicating that the advertisement has ended is displayed.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Implement the countdown function after sending the SMS verification code based on JS (ignore page refresh, and do not perform the countdown function when the page is closed)

<<: How to install phabricator using Docker

>>: MySQL PXC builds a new node with only IST transmission (recommended)