| 本文实例为大家分享了js实现简单广告小窗口的具体代码，供大家参考，具体内容如下 一、目标 利用js实现简易的无法关掉的广告小窗口功能 二、实现步骤1.设置小窗口样式； 2.在JavaScript中绑定左上角X的事件，使其可以点击，但是关不掉，并且在一个指定范围内随机移动位置； 3.设置点击20下（可改变数字）小窗口自动消失。 三、代码模块
1.css部分 <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部分 <div class="box"> <div class="X">X</div></div> 3.js部分 <script> //获取节点 let boxObj = document.querySelector('.box'); let xObj = document.querySelector('.X'); //获取box的位置 let boxLeft = boxObj.offsetLeft; let boxTop = boxObj.offsetTop; //绑定X xObj.onclick = clickFn; xObj.onmouseover = overFn; // 鼠标移入，变为手形 function overFn() { xObj.style.cursor = 'pointer'; } let num=0; //鼠标点击X，窗口不会取消，会跳到另外的随机位置 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'; } } //随机数 function rand(min, max) { return Math.round(Math.random() * (max - min) + min); }</script>4.效果图 原始样式： 
点击后： 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
js实现简易的英汉词典
JS实现五星好评效果 |
