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

Specific use of MySQL window functions

Table of contents 1. What is a window function? 1...

CSS HACK for IE6/IE7/IE8/IE9/FF (summary)

Since I installed the official version of IE8.0, ...

Modification of the default source sources.list file of ubuntu20.04 LTS system

If you accidentally modify the source.list conten...

Install two MySQL5.6.35 databases under win10

Record the installation of two MySQL5.6.35 databa...

Front-end development must learn to understand HTML tags every day (1)

2.1 Semanticization makes your web pages better u...

Specific use of Linux gcc command

01. Command Overview The gcc command uses the C/C...

Vue realizes the sliding cross effect of the ball

This article example shares the specific code of ...

xtrabackup backup and restore MySQL database

Due to some of its own characteristics (locking t...

Vue2 implements provide inject to deliver responsiveness

1. Conventional writing in vue2 // The parent com...

Solution to the bug that IE6 select cannot be covered by div

Use div to create a mask or simulate a pop-up wind...