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
MySQL 5.7.18 installation and problem summary. I ...
Count(*) or Count(1) or Count([column]) are perha...
This article example shares the specific code of ...
The principle is to first write a div with a butt...
This article introduces blue-green deployment and...
Vertical Split Vertical splitting refers to the s...
Today, my colleague encountered a very strange pr...
Detailed explanation of JDBC database link and re...
Follow the steps below 1. request.js content: htt...
Let's first look at the MySQL official docume...
We are not discussing PHP, JSP or .NET environmen...
Chapter 1 <br />The most important principl...
Problem: The null type data returned by mybatis d...
You can use the ps command. It can display releva...
Table of contents background Why error handling? ...