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