js实现简单广告小窗口

本文实例为大家分享了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.效果图

原始样式：

点击后：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。