This article shares the specific code of js to implement a simple advertising window for your reference. The specific content is as follows 1. ObjectivesUse js to implement a simple ad window function that cannot be closed 2. Implementation steps1. 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 Module1.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:
|
<<: 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
The effect is as follows: Example 1 Example 2: Ta...
Today, when I was installing CentOS6.2, I couldn&...
1. Create a database 2. Create a table 1. Create ...
Table of contents 1. What is a window function? 1...
Since I installed the official version of IE8.0, ...
If you accidentally modify the source.list conten...
Examples: Through the PHP background code, you ca...
Database application is an indispensable part of ...
Record the installation of two MySQL5.6.35 databa...
2.1 Semanticization makes your web pages better u...
01. Command Overview The gcc command uses the C/C...
This article example shares the specific code of ...
Due to some of its own characteristics (locking t...
1. Conventional writing in vue2 // The parent com...
Use div to create a mask or simulate a pop-up wind...