javascript
JavaScript（BOM、窗口事件和计时器）
目錄
一、BOM簡介
1、什么是BOM
2、BOM和DOM的區別
3、BOM的構成
二、window對象的常見事件
1、窗口加載事件
2、調整窗口大小事件
?3、案例
三、計數器
1、定時器方法
2、案例（3s后自動關閉廣告）
3、案例（60s內只能發送一次短信）
一、BOM簡介
1、什么是BOM
BOM：瀏覽器對象,可以和瀏覽器窗口進行交互的對象其核心對象是window對象
2、BOM和DOM的區別
DOM：是文檔對象模型，把文檔當做一個對象來看待，它的頂級對象是document
BOM：是瀏覽器對象模型，是把瀏覽器當做一個對象來看待，它的頂級對象是window
3、BOM的構成
二、window對象的常見事件
1、窗口加載事件
window.onload：是窗口加載事件，當文檔內容（包括圖像、腳本文件、CSS文件等）完全加載完成會出發該事件。
// 方式1 window.onload = function () {}; // 方式2 window.addEventListener('load', function () {});2、調整窗口大小事件
document.DOMContentLoaded：加載事件，會在DOM加載完成時觸發（加載不包括CSS樣式表、圖片和flash動畫等額外內容的加載）
window.onresize：當調整window窗口大小的時候，就會觸發window.onresize事件
// 方式1 window.onresize = function () {}; // 方式2 window.addEventListener('resize', function () {});?3、案例
<body><script>window.addEventListener('load',function(){alert('頁面加載中')})window.addEventListener('resize',function(){console.log('窗口大小改變了')})</script> </body>?
?窗口大小改變時會記次數
三、計數器
1、定時器方法
| setTimeout() | 在指定的毫秒數后調用函數或執行一段代碼 |
| setInterval() | 按照指定的周期（以毫秒計）來調用函數或執行一段代碼 |
| clearTimeout() | 取消由setTimeout()方法設置的定時器 |
| clearInterval() | 取消由setInterval()設置的定時器 |
2、案例（3s后自動關閉廣告）
使用setTimeout()實現3秒后自動關閉廣告的效果
<body><script>var timer = setTimeout(func,3000);//只執行一次setInterval(func,2000)//會重復執行function func(){console.log("廣告沒有了")}</script> </body>3、案例（60s內只能發送一次短信）
可重復進行發送
注意：第一次time倒計時結束后，要再一次向time賦值，這樣才可以循環的發送
<body><div><label>手機號碼：<input type="text"><button id="btn">發送</button></label></div><script>//1、先獲取按鈕var btn = document.querySelector('#btn');var time = 60;btn.addEventListener('click',function(){btn.disabled = true;//按鈕不可用//2、先創建定時器var timer = setInterval(function(){if(time == 0){//2.1、清除定時器clearInterval(timer);//2.2、讓按鈕變的可用btn.disabled = false;//2.3、讓按鈕的文字變為‘發送’btn.innerHTML = '發送';time = 60;}else{btn.innerHTML = '還剩'+time+'秒';time--;}},1000)})</script> </body>?
總結
以上是生活随笔為你收集整理的JavaScript（BOM、窗口事件和计时器）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IT桔子2013年度中国互联网创业投资盘
- 下一篇： HTML5期末大作业：动漫网站设计——斗