目錄
• 頁面加載事件
• 調整窗口大小
• 定時器
• location
• history
頁面加載事件
1. load
頁面所有元素加載完畢才執行
window.addEventListener('load', function () {
var btn = document.querySelector('button');
btn.onclick = function () {
alert('1');
}
})
1. DOMContentLoaded
DOM元素加載完畢執行，不包含圖片 falsh css 等 加載速度比 load 快
window.addEventListener('DOMContentLoaded', function () {
alert('3');
})
調整窗口大小
1. resize
頁面的大小發生變化就會觸發
window.addEventListener('resize', function () {
// window.innerWidth 瀏覽器頁面的寬 window.innerHeight 瀏覽器頁面的高
console.log('寬:' + window.innerWidth, '高:' + window.innerHeight);
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block'
}
})
定時器
1. setTimeou
語法規範：window.setTimeout(調用函數，延時時間);
此處 window 可省略 延時時間可省略 省略默認為 0 默認單位毫秒
setTimeout(function(e){
console.log(e);
alert('倒計時已完成');
},2000)
這個調用函數可以寫函數也可以寫函數名
setTimeout(djs, 2000);
function djs() {
alert('倒計時已完成');
}
回調函數：上一件事情幹完再回過頭調用函數
例：setTimeout(調用函數，延遲時間) 等延遲時間完了再調用‘調用函數’
setTimeout(djs,2000) 2000 毫秒過後 調用 djs
1. 清除setTimeou
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function() {
alert('三秒倒計時已結束');
},3000)
btn.addEventListener('click', function(){
// clearTimeout 清除定時器
clearTimeout(timer);
alert('倒計時已暫停')
})
</script>
1. setInterval
每隔這個延時時間就調用一次調用函數
var time = 1;
setInterval(function() {console.log(time++);},1000)
1. 清除setInterval
stop.addEventListener('click', function () {
console.log('暫停計時');
clearInterval(timer);
})
location
1. href
location 位置 href 超鏈接 location.href 跳轉至超鏈接的位置
location.href = 'http://127.0.0.1:5500/js/BOM/08two.html';
1. search
獲取 URL 參數 location.search 返回參數
// 第一個網頁
<form action="09two.html">
用户名：<input type="text" name="usname"> <input type="submit" value="登錄">
</form>
// 第二個網頁
<script>
var div = document.querySelector('div');
// 獲取 URL 參數 location.search 返回參數
console.log(location.search); // ?usname=a
// 去除 ？ substr(起始位置，截取字符個數)
var params = location.search.substr(1);
console.log(params); // usname=a
// 分隔成數組 split('=')
var arr = params.split('=');
console.log(arr); // ['usname', 'a']
div.innerHTML = arr[1] + ' 歡迎登錄';
</script>
1. 常見方法
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
// 記錄瀏覽歷史，可以實現後退功能
// location.assign('http://www.baidu.com');
// 替換頁面不能後退
// location.replace('http://www.baidu.com');
// 重新加載頁面，相當於刷新（f5）參數為 true 強制刷新（ctrl+f5）
location.reload(true);
})
</script>
history
1. 前進 forward() go(1) 後退 back() go(-1) 刷新 go(0)
// 第一個網頁
<body>
<a href="http://127.0.0.1:5500/js/BOM/11two.html">點擊我去下一頁</a>
<button class="forward">前進</button>
<button class="f5">刷新</button>
<script>
var btn = document.querySelector('.forward');
btn.addEventListener('click', function(){
history.forward();
})
var btn2 = document.querySelector('.f5');
btn2.addEventListener('click',function(){
// -1 後退 0 刷新 1 前進
history.go(0);
})
</script>
</body>
// 第二個網頁
<body>
<a href="http://127.0.0.1:5500/js/BOM/11history%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95.html">點擊我去上一頁</a>
<button>後退</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
history.back();
})
</script>
</body>本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。
