欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)簡(jiǎn)單廣告小窗口

 更新時(shí)間：2021年09月10日 10:53:47   作者：恍然大明白！  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單廣告小窗口，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)單廣告小窗口的具體代碼，供大家參考，具體內(nèi)容如下

一、目標(biāo)

 利用js實(shí)現(xiàn)簡(jiǎn)易的無(wú)法關(guān)掉的廣告小窗口功能

二、實(shí)現(xiàn)步驟

1.設(shè)置小窗口樣式；

2.在JavaScript中綁定左上角X的事件，使其可以點(diǎn)擊，但是關(guān)不掉，并且在一個(gè)指定范圍內(nèi)隨機(jī)移動(dòng)位置；

3.設(shè)置點(diǎn)擊20下（可改變數(shù)字）小窗口自動(dòng)消失。

三、代碼模塊

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>
        //獲取節(jié)點(diǎn)
        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;
 
        // 鼠標(biāo)移入，變?yōu)槭中?
        function overFn() {
            xObj.style.cursor = 'pointer';
        }
        let num=0;
        //鼠標(biāo)點(diǎn)擊X，窗口不會(huì)取消，會(huì)跳到另外的隨機(jī)位置
        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';
            }
        }
        //隨機(jī)數(shù)
        function rand(min, max) {
            return Math.round(Math.random() * (max - min) + min);
        }
</script>

4.效果圖

原始樣式：

點(diǎn)擊后：


以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論