快到年底了，你的家長在催你找物件不？
你是否在為找物件而煩惱嗎？
看到這篇博客就算你運氣好！
我這有好幾個可以給你介紹介紹🤭
處不處的了就看你自己的本事了哦~
目錄
心動女嘉賓1號——BOM物件
BOM物件的自我介紹
BOM的定時效果
BOM輪播圖、放大鏡
總結
心動女嘉賓1號——BOM物件
這位女嘉賓五官端正，有著靈活的身姿，可以左右跑而且充滿活力；她還很自律，能夠定時監督你學習的作用；她時而熱情奔放，時而安靜穩重...至于更多詳情就請耐心往下讀吧~
看到物件的第一步就先看她的外貌
她的大致框架會是什么樣的呢？
沒錯！我們將會從這幾個方面來給大家進行介紹！
BOM物件的自我介紹
BOM（Browser Object Mode）瀏覽器物件模型，是Javascript的重要組成部分，它提供了一系列物件用于與瀏覽器視窗進行互動，這些物件通常統稱為BOM，
BOM內在品質——能屈能伸
BOM在<script> </script>中可以設定回應式布局，隨著頁面的大小改變而調整頁面中的內容大小，
window.addEventListener('load', function() { } 有了這句話就可以在div前寫js了，
<body>
<script>
// 注冊頁面加載事件
window.addEventListener('load', function() { //有了這句話就可以在div前寫js了
var div = document.querySelector('div');
// 注冊調整視窗大小事件
window.addEventListener('resize', function() {
// window.innerWidth 獲取視窗大小
console.log('變化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
<div></div>
</body>BOM的定時效果
它可以倒計時，為你計時setTimeout( );也可以無限回呼，每隔多少時間提醒你一次setInterval( );
下面我來列舉幾個具體的它能執行的案例：
1.當經過5s后頁面中的廣告能夠自動隱藏掉
語法結構：setTimeout(呼叫函式,延遲的毫秒數 );
<body>
<!-- 原理：5s過后廣告自動隱藏掉 -->
<img src="../3-9/images/ad.jpg" alt=" class='ad">
<script>
var img = document.querySelector('img');
setTimeout(function() {
img.style.display = 'none';
}, 1000);
</script>
</body>2.頁面中的倒計時效果
語法結構：setInterval(回呼函式，每個多少毫秒呼叫一次)
<style>
div {
margin: 200px;
}
span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
<body>
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
// 核心思路：倒計時是不斷變化的，因此需要定時器自動變化setInterval
// 用三個黑色盒子來存放：時分秒
// 三個黑色盒子利用innerHTML放入計算的小時分鐘秒數
// 1.
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2021-12-7 20:00:00');
//回傳的是用戶輸入時間總的毫秒數
countDown(); //先呼叫這個函式，防止重繪頁面是空白
// 2.主要：如何獲取剩余時分秒呢？
// 呼叫定時器
setInterval(countDown, 1000);
// 先得到現在的時間
function countDown() {
var nowTime = +new Date(); //回傳的是當前時間總的毫秒數
//注意區分time和times的變數
var times = (inputTime - nowTime) / 1000; //time是剩余時間總的秒數
var h = parseInt(times / 60 / 60 % 24); //時
h = h < 10 ? '0' + h : h;
// 把剩余的小時給黑色盒子
hour.innerHTML = h;
var m = parseInt(times / 60 % 60); //分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60); //當前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
</body>
3.網頁中短信驗證碼的效果
<body>
手機號碼：<input type="number">
<button>發送</button>
<script>
// 1.
var btn = document.querySelector('button');
var time = 2;
// 2.當點擊按鈕后按鈕就會被禁用 disabled為true
// 當點擊按鈕button后就能倒計時
btn.addEventListener('click', function() {
btn.disabled = true;
var time1 = setInterval(function() {
// 如果time=0就又能點擊
if (time == 0) {
// 如果倒計時為0后就清除定時器
clearInterval(time1);
// 發送的按鈕又可以使用
btn.disabled = false;
btn.innerHTML = '發送';
time = 3; //細節！！這個3需要重新開始
} else {
btn.innerHTML = '還剩' + time + '秒';
time--;
}
}, 1000);
})
</script>
</body>BOM輪播圖、放大鏡
對于頁面中可以自動變換的輪播圖是否覺得很吸睛？沒錯！咱們的BOM物件就可以完成！
具體操作可參照我之前寫的一篇：
前端必備技能——輪播圖（原生代碼+插件）_m0_60264901的博客-CSDN博客今天咱就是讓你不僅自己能寫出輪播圖代碼，還能用插件插入輪播圖https://blog.csdn.net/m0_60264901/article/details/121956179?spm=1001.2014.3001.5501BOM可以放大圖片效果
網頁中可以放大圖片的效果：
主要效果：
- 滑鼠經過大小圖片盒子，黃色遮擋層和大圖片盒子顯示；
- 黃色遮罩層跟隨滑鼠功能；
- 移動黃色遮罩層，大圖更碎移動功能
在制作中也有兩個注意點！！！
- 放大的盒子中的圖片一定要比放大的盒子大！不然就無法有拖動到哪就放大的效果，
- 使用offset的時候注意父親和兒子盒子是否有絕對定位還是相對于body，
對于使用offset的介紹我之前也寫過一篇，大家可以參照一下：
綜合運用之拖動模態框案例_m0_60264901的博客-CSDN博客成功永遠屬于馬上行動的人!https://blog.csdn.net/m0_60264901/article/details/121856201?spm=1001.2014.3001.5501
在制作中還有一個核心思想：
我們需要得到在被放大的盒子里滑鼠的坐標（x,y），所以我們需要把滑鼠在頁面中的坐標值（x，y）賦值給黃色遮罩的坐標
HTML代碼框架：
<body>
<div class="wrap">
<img src="../3-13/images/plmm.jpg" alt="" class='box-img'>
<div class="mask"></div>
<div class="big">
<img src="../3-13/images/plmm.jpg" alt="" id='bigImg'>
</div>
</div>
</body>Javascript代碼如下：
window.addEventListener('load', function() {
//load 事件這個是為了先讓頁面加載完再實行js
// 當我們滑鼠經過box這個盒子 就顯示遮罩層和放大big的盒子
var wrap = document.querySelector('.wrap');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
wrap.addEventListener('mouseover', function() {
mask.style.display = 'block';
big.style.display = 'block';
})
wrap.addEventListener('mouseout', function() {
mask.style.display = 'none';
big.style.display = 'none';
})
// 2.mask盒子隨著滑鼠走
// 得到滑鼠距離box盒子的大小--offset
// 先得到滑鼠在盒子內的滑鼠
wrap.addEventListener('mousemove', function(e) {
var x = e.pageX - wrap.offsetLeft;
var y = e.pageY - wrap.offsetTop;
// console.log(x, y);
// 滑鼠坐標賦值給mask并且讓滑鼠再mask的正中間
// 150的由于盒子box的一半
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// 防止mask超過box
// mask橫坐標針對于box的左邊
// 遮擋層的最大移動距離
var maskMax = wrap.offsetWidth - mask.offsetWidth;
// maskX是遮擋層移動的距離
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) { // mask縱坐標針對于box的左邊
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 大圖片的移動距離=遮擋層移動距離*大圖片最大移動距離/遮擋層的最大移動距離
var bigImg = document.querySelector('#bigImg');
// 大圖片最大移動距離
var bigMax = bigImg.offsetWidth - big.offsetWidth;
// 大圖片移動距離X Y
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
})
})總結
以上就是今天對于BOM物件的具體應用的介紹啦~
喜歡的話就來一個👍對博主我的鼓勵吧！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/382901.html
標籤：其他
上一篇：為什么人們不喜歡 PHP？