js实现简单广告小窗口
时间：2021-12-12 11:57:39|栏目：JavaScript代码|点击： 次
本文实例为大家分享了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.效果图
原始样式：
点击后：
