js to realize a simple advertising window

js to realize a simple advertising window

This article shares the specific code of js to implement a simple advertising window for your reference. The specific content is as follows

1. Objectives

Use js to implement a simple ad window function that cannot be closed

2. Implementation steps

1. Set the small window style;

2. Bind the event of the upper left corner X in JavaScript so that it can be clicked but cannot be turned off, and moves randomly within a specified range;

3. Set the window to disappear automatically after 20 clicks (number can be changed).

3. Code Module

1.css part

<style>
        .box {
            width: 180px;
            height: 180px;
            background: #f0f0f0;
            position: absolute;
        }
 
        .X {
            width: 30px;
            height: 30px;
            background: #eaeaea;
            color: firebrick;
            text-align: center;
            line-height: 30px;
        }
</style>

2.html part

<div class="box">
        <div class="X">X</div>
</div>

3.js part

<script>
        //Get the node let boxObj = document.querySelector('.box');
        let xObj = document.querySelector('.X');
 
        //Get the position of box let boxLeft = boxObj.offsetLeft;
        let boxTop = boxObj.offsetTop;
        // Bind X
 
        xObj.onclick = clickFn;
        xObj.onmouseover = overFn;
 
        //Move the mouse in and change to hand shapefunction overFn() {
            xObj.style.cursor = 'pointer';
        }
        let num=0;
        //When the mouse clicks X, the window will not be cancelled but will jump to another random position. function clickFn() {
            boxObj.style.left = boxLeft + rand(1, 1000) + 'px';
            boxObj.style.top = boxTop + rand(1, 500) + 'px';
            num++;
            if(num==20){
                boxObj.style.display='none';
            }
        }
        //Random number function rand(min, max) {
            return Math.round(Math.random() * (max - min) + min);
        }
</script>

4. Rendering

Original style:

After clicking:


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:
  • JS lower right corner advertising window code (can be shrunk, expanded and closed)
  • JS realizes the special effects of floating mobile window (floating advertisement)

<<:  A summary of the knowledge points of database indexing. Everything you need to know is here.

>>:  Detailed tutorial for upgrading zabbix monitoring 4.4 to 5.0

Recommend

Detailed explanation of the basic use of react-navigation6.x routing library

Table of contents react-native project initializa...

Detailed explanation of the installation process of Jenkins on CentOS 7

Install Jenkins via Yum 1. Installation # yum sou...

Two ways to manage volumes in Docker

In the previous article, I introduced the basic k...

A brief analysis of the usage of HTML float

Some usage of float Left suspension: float:left; ...

How to set mysql permissions using phpmyadmin

Table of contents Step 1: Log in as root user. St...

Vue uses better-scroll to achieve horizontal scrolling method example

1. Implementation principle of scrolling The scro...

Detailed tutorial on installing MYSQL under WINDOWS

1. Download the installation package -Choose the ...

Sample code for implementing rolling updates of services using Docker Swarm

1. What is Docker Swarm? Docker Swarm is a cluste...

HTML dl, dt, dd tags to create a table vs. Table creation table

Not only does it reduce the cost of website develo...

Detailed explanation of the life cycle of Angular components (Part 2)

Table of contents 1. View hook 1. Things to note ...

Implementation example of Docker rocketmq deployment

Table of contents Preparation Deployment process ...

Six-step example code for JDBC connection (connecting to MySQL)

Six steps of JDBC: 1. Register the driver 2. Get ...