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)文章
原生 JS Ajax,GET和POST 請(qǐng)求實(shí)例代碼
這篇文章主要介紹了原生 JS Ajax,GET和POST 請(qǐng)求實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法,涉及javascript事件響應(yīng)及針對(duì)頁(yè)面dom元素節(jié)點(diǎn)與屬性的動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
JavaScript分步實(shí)現(xiàn)一個(gè)出生日期的正則表達(dá)式
本文把出生日期分割成幾個(gè)部分，分步地介紹了實(shí)現(xiàn)一個(gè)出生日期校驗(yàn)的完整過(guò)程。對(duì)出生日期正則表達(dá)式感興趣的朋友參考下吧2018-03-03
js中如何復(fù)制一個(gè)數(shù)組(淺復(fù)制、深復(fù)制)
這篇文章主要介紹了js中如何復(fù)制一個(gè)數(shù)組(淺復(fù)制、深復(fù)制)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
javascript實(shí)現(xiàn)右側(cè)彈出“分享到”窗口效果
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)右側(cè)彈出“分享到”窗口效果，以一個(gè)完整的js右側(cè)彈出“分享到”窗口的實(shí)例代碼進(jìn)行分析，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了詳解ES6 系列之異步處理實(shí)戰(zhàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
uniapp發(fā)送formdata表單請(qǐng)求2種方法(全網(wǎng)最簡(jiǎn)單方法)
這篇文章主要給大家介紹了關(guān)于uniapp發(fā)送formdata表單請(qǐng)求2種方法的相關(guān)資料,本文介紹的方法應(yīng)該是全網(wǎng)最簡(jiǎn)單方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了JS深拷貝與淺拷貝的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-08-08
微信小程序?qū)崿F(xiàn)卡片左右滑動(dòng)效果的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)卡片左右滑動(dòng)效果的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
一些常用且實(shí)用的原生JavaScript函數(shù)
日常開(kāi)始中常用到的一些原生JavaScript函數(shù),比較實(shí)用, 今天特地整理一下,分享給大家,希望對(duì)大家有用,會(huì)常更新,同時(shí)也歡迎大家補(bǔ)充.2010-09-09