JavaScript实现无法关闭的随机移动广告弹窗
作者:异步漫步时间:2026-10-24 15:35:11浏览:582
本文介绍如何使用JavaScript实现一个简易但无法直接关闭的广告弹窗。通过CSS设置窗口样式,利用JS监听鼠标事件使关闭按钮变为手型,并在点击时触发随机位置移动逻辑。同时限制点击次数,达到指定阈值后窗口自动隐藏,适用于前端交互特效学习。
以下代码展示了利用JavaScript创建简易广告弹窗的具体实现方式,供参考学习。
一、目标
核心需求是使用JavaScript编写一个难以关闭的广告小窗口功能。
二、实现步骤
1. 定义小窗口的CSS样式;
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. JavaScript逻辑部分
<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. 效果演示
初始状态样式如下:

交互点击后的状态如下:

以上内容为本文的全部代码与说明,希望能为读者的前端开发提供有益参考。
作者最新文章
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
