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

MySQL 5.7.18 installation tutorial and problem summary

MySQL 5.7.18 installation and problem summary. I ...

The difference and execution method of select count() and select count(1)

Count(*) or Count(1) or Count([column]) are perha...

js to achieve the pop-up effect

This article example shares the specific code of ...

How to use nginx to simulate canary release

This article introduces blue-green deployment and...

Vertical and horizontal splitting of MySQL tables

Vertical Split Vertical splitting refers to the s...

Detailed explanation of JDBC database link and related method encapsulation

Detailed explanation of JDBC database link and re...

Detailed explanation of the configuration method of Vue request interceptor

Follow the steps below 1. request.js content: htt...

How to create a MySQL database and support Chinese characters

Let's first look at the MySQL official docume...

Web Theory: Don't make me think Reading Notes

Chapter 1 <br />The most important principl...

Solution to MySQL IFNULL judgment problem

Problem: The null type data returned by mybatis d...

How to View All Running Processes in Linux

You can use the ps command. It can display releva...

A more elegant error handling method in JavaScript async await

Table of contents background Why error handling? ...