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)
Recommend
Logrotate implements Catalina.out log rotation every two hours
1. Introduction to Logrotate tool Logrotate is a ...
Detailed explanation of the use of docker tag and docker push
Docker tag detailed explanation The use of the do...
Detailed explanation of the use of Arguments object in JavaScript
Table of contents Preface Basic Concepts of Argum...
XHTML Getting Started Tutorial: XHTML Hyperlinks
It is no exaggeration to say that hyperlinks conne...
Remote Desktop Connection between Windows and Linux
When it comes to remote desktop connection to Lin...
Specific use of Node.js package manager npm
Table of contents Purpose npm init and package.js...
Detailed explanation of the usage and differences of MySQL views and indexes
MySQL Views Simply put, a MySQL view is a shortcu...
Briefly describe the difference between MySQL and Oracle
1. Oracle is a large database while MySQL is a sm...
Installation steps of docker-ce on Raspberry Pi 4b ubuntu19 server
The Raspberry Pi model is 4b, 1G RAM. The system ...
Example of using CASE WHEN in MySQL sorting
Preface In a previous project, the CASE WHEN sort...
How to configure domestic sources in CentOS8 yum/dnf
CentOS 8 changed the software package installatio...
Detailed explanation of common template commands in docker-compose.yml files
Note: When writing the docker-compose.yml file, a...
Autotrash tool for Linux to automatically delete old junk files at a scheduled time
Autotrash is a command line program that automate...
Introduction to deploying selenium crawler program under Linux system
Table of contents Preface 1. What is selenium? 2....
Document Object Model (DOM) in JavaScript
Table of contents 1. What is DOM 2. Select elemen...