js實現(xiàn)簡單廣告小窗口
更新時間：2021年09月10日 10:53:47 作者：恍然大明白！
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單廣告小窗口，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)簡單廣告小窗口的具體代碼，供大家參考，具體內容如下
一、目標
利用js實現(xiàn)簡易的無法關掉的廣告小窗口功能
二、實現(xiàn)步驟
1.設置小窗口樣式；
2.在JavaScript中綁定左上角X的事件，使其可以點擊，但是關不掉，并且在一個指定范圍內隨機移動位置；
3.設置點擊20下（可改變數(shù)字）小窗口自動消失。
三、代碼模塊
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é)點
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;
// 鼠標移入，變?yōu)槭中?
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';
}
}
//隨機數(shù)
function rand(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
</script>
4.效果圖
原始樣式：
點擊后：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
layui 上傳文件_批量導入數(shù)據(jù)UI的方法
今天小編就為大家分享一篇layui 上傳文件_批量導入數(shù)據(jù)UI的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JS通過Cookie判斷頁面是否為首次打開 的相關資料,需要的朋友可以參考下2016-02-02
Bootstrap打造一個左側折疊菜單的系統(tǒng)模板(一)
這篇文章主要介紹了Bootstrap打造一個左側折疊菜單的系統(tǒng)模板(一)的相關資料,需要的朋友可以參考下2016-05-05
this對于一些有經(jīng)驗的JavaScript開發(fā)者來說是一種非常復雜的機制。并且很多開發(fā)者對于this的理解并不是很清晰，導致在面試的時候經(jīng)常受挫。今天我們就來看一看這個this真的有那么難嗎2023-02-02
js 實現(xiàn)省市區(qū)三級聯(lián)動菜單效果
本文主要分享了js實現(xiàn)省市區(qū)三級聯(lián)動菜單效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)側邊分類欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
3分鐘教你用JavaScript實現(xiàn)電子簽名效果
電子簽名已經(jīng)成為現(xiàn)代商業(yè)中不可或缺的一部分，它可以提高業(yè)務流程的效率和安全性。本文將介紹如何使用HTML5的canvas元素和JavaScript在前端實現(xiàn)電子簽名，需要的可以參考一下2023-04-04
這篇文章主要為大家詳細介紹了小程序調用微信支付的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了JS徹底弄懂GMT和UTC時區(qū)，對時間感興趣的同學，可以參考下2021-04-04
本文主要介紹了Typescript井字棋的項目實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08