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
Table of contents Tomcat class loader hierarchy W...
Table of contents react-native project initializa...
Install Jenkins via Yum 1. Installation # yum sou...
After reinstalling the system today, I reinstalle...
This article shares the specific code of js to re...
In the previous article, I introduced the basic k...
Some usage of float Left suspension: float:left; ...
Table of contents Step 1: Log in as root user. St...
1. Implementation principle of scrolling The scro...
1. Download the installation package -Choose the ...
1. What is Docker Swarm? Docker Swarm is a cluste...
Not only does it reduce the cost of website develo...
Table of contents 1. View hook 1. Things to note ...
Table of contents Preparation Deployment process ...
Six steps of JDBC: 1. Register the driver 2. Get ...