导航首页 »  JavaScript代码  » js实现简单广告小窗口

js实现简单广告小窗口

王朝235网址导航 2021-10-17 55 ℃

这篇文章主要为大家详细介绍了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.效果图


原始样式:

2021910105330170.jpg

点击后:

2021910105355907.jpg

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持王朝235网址导航。


免责声明
文章内容由王朝235网址导航整理发布,仅供学习交流使用,不代表本站的观点和立场,具体内容请自行甄别。
加入好处
简单来说就是可以给您的网站提升权重排名,增加外链和网站流量!如果细分的话那么有如下几个好处!
让您的网站更快、更多地被搜索引擎收录
让您的网站名称的关键词在搜索引擎的搜索结果的第一页甚至第一个
通过本站这个分类目录平台从而给您的网站带来巨大流量
如您网站被搜索引擎屏蔽,王朝235网址导航永久缓存贵站信息,通过这个页面浏览者照样借助王朝235网址导航进入您的网站!
温馨提示:如果贵站想上百度,希望贵站能添加本页面为友情链接,感谢您对本站的支持!
<a href="http://www.wc235.com" target="_blank">王朝235网址导航</a>