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:
|
<<: How to install phabricator using Docker
>>: MySQL PXC builds a new node with only IST transmission (recommended)
![Analysis of mysql temporary table usage [query results can be stored in temporary tables]](/upload/images/67cadb762ca4c.webp)
Recommend
Detailed example of sorting function field() in MySQL
Preface In our daily development process, sorting...
Reasons and solutions for MySQL selecting the wrong index
In MySQL, you can specify multiple indexes for a ...
VMware virtual machine three connection methods example analysis
NAT In this way, the virtual machine's networ...
How to solve the problem of Ubuntu 18.04 looping login/stuck on the boot interface/unable to enter the graphical interface
Cause: NVIDIA graphics card driver is damaged Sol...
How to monitor array changes in Vue
Table of contents Preface Source code Where do I ...
How to use module fs file system in Nodejs
Table of contents Overview File Descriptors Synch...
How to configure multiple tomcats with Nginx load balancing under Linux
The methods of installing nginx and multiple tomc...
Vue+elementUI component recursively implements foldable dynamic rendering multi-level sidebar navigation
The function has been implemented a long time ago...
jQuery implements the function of adding and deleting employee information
This article shares the specific code of jQuery t...
HTML sub tag and sup tag
Today I will introduce two HTML tags that I don’t...
Automatic file synchronization between two Linux servers
When server B (172.17.166.11) is powered on or re...
CocosCreator ScrollView optimization series: frame loading
Table of contents 1. Introduction 2. Analysis of ...
docker cp copy files and enter the container
Enter the running container # Enter the container...
Detailed explanation of the correct use of the if function in MySQL
For what I am going to write today, the program r...
Docker build PHP environment tutorial detailed explanation
Docker installation Use the official installation...