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. 效果演示

初始状态样式如下:

一、目标

交互点击后的状态如下:

一、目标

以上内容为本文的全部代码与说明,希望能为读者的前端开发提供有益参考。

作者最新文章