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.效果图

原始样式：

点击后：

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

赞 (0)

相关推荐

  • JS实现悬浮移动窗口(悬浮广告)的特效

    js方法: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <title> New Document </title>        <meta name="Gener

  • JS右下角广告窗口代码(可收缩、展开及关闭)

    JS右下角广告窗口代码(可收缩、展开及关闭)

    本文实例讲述了JS右下角广告窗口代码.分享给大家供大家参考.具体如下: 这是一款右下角窗口JS代码,完美的右下角,仿新浪博客的右个角弹出窗口,这款Javascript代码在兼容性和操作舒适度方面做的相当不错.调用了几张外部的图片,使用时自行下载吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-buttom-show-close-able-adv-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "

  • js实现简单广告小窗口

    js实现简单广告小窗口

    本文实例为大家分享了js实现简单广告小窗口的具体代码,供大家参考,具体内容如下 一.目标 利用js实现简易的无法关掉的广告小窗口功能 二.实现步骤 1.设置小窗口样式: 2.在JavaScript中绑定左上角X的事件,使其可以点击,但是关不掉,并且在一个指定范围内随机移动位置: 3.设置点击20下(可改变数字)小窗口自动消失. 三.代码模块 1.css部分 <style> .box { width: 180px; height: 180px; background: #f0f0f0; posi

  • js实现简单抽奖小功能

    js实现简单抽奖小功能

    本文实例为大家分享了js实现简单抽奖小功能的具体代码,供大家参考,具体内容如下 1.场景: 点击按钮开始随机抽取奖品,当停止那刻停留在大屏幕的是抽中的奖品("谢谢"即为没奖). 2.思路: 众所周知,抽奖主要讲究的就是随机性,并且是在一堆奖项中抽取.那么可以锁定方向:用数组放奖项名,用Math.random()来返回介于 0(包含) ~ 1(不包含) 之间的一个随机数.只要能随机选中数组的下标,便能随机选中奖项. 话不多说,附上代码: <!DOCTYPE html> <

  • js实现简单拼图小游戏

    js实现简单拼图小游戏

    本文实例为大家分享了js实现简单拼图小游戏的具体代码,供大家参考,具体内容如下 游戏很简单,拼拼图,鼠标拖动一块去和另一块互换.语言是HTML+js,注释写的有不明白的可以留言问一下. 截图 代码区 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/

  • js实现简单翻牌小游戏

    js实现简单翻牌小游戏

    本文实例为大家分享了js实现简单翻牌小游戏的具体代码,供大家参考,具体内容如下 1.简介 非常简单的一个网络消消乐翻牌小游戏的实现,代码量较少,不过遇到的bug和自行开发的步骤十分有纪念意义. 2.核心代码块 生成随机数列,确定图片随机分布 function getImgIndex(is){    var index = parseInt(Math.random()*8)+1;          if(is[index] < 2){              is[index]++;      

  • JS简单实现浮动窗口效果示例

    JS简单实现浮动窗口效果示例

    本文实例讲述了JS简单实现浮动窗口效果.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • JS实现简单易用的手机端浮动窗口显示效果

    JS实现简单易用的手机端浮动窗口显示效果

    本文实例讲述了JS实现简单易用的手机端浮动窗口显示效果.分享给大家供大家参考,具体如下: html: <style type="text/css"> .fdBonTel{ width:100%; height:53px; position:fixed; background:#0052ae; text-align:center; left:0; bottom:0; z-index:999; } .fdOnline{ background:url(index/images/o

  • JS简单实现父子窗口传值功能示例【未使用iframe框架】

    本文实例讲述了JS简单实现父子窗口传值功能.分享给大家供大家参考,具体如下: 父窗口页面father.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>父窗口 </TITLE> <script language="javascript"> <!-- functio

  • js实现简单的左右两边固定广告效果实例

    本文实例讲述了js实现简单的左右两边固定广告效果的方法.分享给大家供大家参考.具体分析如下: 大多数网站都有左右两边的固定广告位,下面呢就是实现这个效果的最简单的代码,可能在ie下滚动的时候会有一点抖动,这个问题以后再解决了,先实现再说. 要点一: var adtop = adleft.offsetTop; 获得元素距离上边的位置,在滚动的时候需要用到. 要点二: 复制代码 代码如下: adleft.style.top=adtop+(document.documentElement.scroll

  • js+canvas实现简单扫雷小游戏

    js+canvas实现简单扫雷小游戏

    扫雷小游戏作为windows自带的一个小游戏,受到很多人的喜爱,今天我们就来尝试使用h5的canvas结合js来实现这个小游戏. 要写游戏,首先要明确游戏的规则,扫雷游戏是一个用鼠标操作的游戏,通过点击方块,根据方块的数字推算雷的位置,标记出所有的雷,打开所有的方块,即游戏成功,若点错雷的位置或标记雷错误,则游戏失败. 具体的游戏操作如下 1.可以通过鼠标左键打开隐藏的方块,打开后若不是雷,则会向四个方向扩展 2.可以通过鼠标右键点击未打开的方块来标记雷,第二次点击取消标记 3.可以通过鼠标右键

  • 原生js实现简单贪吃蛇小游戏

    原生js实现简单贪吃蛇小游戏

    本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 先上图 话不多说,代码奉上,喜欢的请留下你的小星星♥(ˆ◡ˆԅ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial

随机推荐