011：【JS】 BOM：窗口、弹窗、地址、历史记录、onload、onscroll、滚动距离、本地存储、session 存储
目录
1：窗口
2：弹窗
3：地址
4：历史记录
5：onload、onscroll
6：滚动距离
7：本地存储
8：session 存储
正文
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM</title> <style> * { margin: 0; padding: 0; } html, body { width: 2000px; height: 2000px; } </style> <script> /* BOM： 1:获取一些浏览器的相关信息（窗口的大小） 2:弹框 3：地址栏 4：历史记录 */ // 1: 游览器可视窗口的尺寸 console.log(window.innerHeight, innerHeight) console.log(window.innerWidth, innerWidth) // 2:弹框 // 页面所有得资源都加载完后执行 （图片，视频， dom） window.onload = function () { // 弹框 btn1.onclick = function () { setTimeout(function () { alert("缓存清除成功") }, 2000); } // 询问框 btn2.onclick = function () { var res = confirm("你确定删除吗？") console.log(res) if (res) { } else { } } // 输入框 prompt btn3.onclick = function () { var res = prompt("请输入你得用户名") console.log(res); } // 3：地址栏 会把中文变成 url 编码的格式 btn4.onclick = function () { location.href = "http://www.baidu.com" } // 刷新 btn5.onclick = function () { location.reload() } // 6：回到顶部 btn6.onclick = function () { window.scrollTo({ left: 0, top: 0 }) } // 7:打开页面和关闭页面 btn7.onclick = function () { window.open("http://www.baidu.com") } btn8.onclick = function () { window.close() } // 8:前进后退 /* 前进 */ btn9.onclick = function () { window.history.forward() window.history.go(1) } /* 后退 */ btn10.onclick = function () { window.history.back() window.history.go(-1) } // 9:localStorage永久存储 // 存储 btn11.onclick = function () { //存，只能存字符串， 不能存对象， localStorage.setItem("obj", JSON.stringify({ name: "kerwin", age: 100 })) } // 获取 btn12.onclick = function () { console.log(JSON.parse(localStorage.getItem("obj"))) } // 删除 btn13.onclick = function () { localStorage.removeItem("obj") } // 清除 btn14.onclick = function () { localStorage.clear() } // 10:sessionStorage永久存储 // 存储 btn15.onclick = function () { //存，只能存字符串， 不能存对象， sessionStorage.setItem("obj", JSON.stringify({ name: "kerwin", age: 100 })) } // 获取 btn16.onclick = function () { console.log(JSON.parse(sessionStorage.getItem("obj"))) } // 删除 btn17.onclick = function () { sessionStorage.removeItem("obj") } // 清除 btn18.onclick = function () { sessionStorage.clear() } }; // 4：window 的常用方法 window.onscroll = function () { console.log("scroll", "滚动距离达到指定距离了？") // 5:滚动距离 兼容性 console.log(document.documentElement.scrollTop || document.body.scrollTop) // console.log(document.documentElement.scrollLeft || document.body.scrollLeft) if ((document.documentElement.scrollTop || document.body.scrollTop) > 100) { console.log("显示回到顶部按钮") } else { console.log("隐藏回到顶部按钮") } } </script> </head> <body> <button id="btn1">弹框</button> <button id="btn2">询问框</button> <button id="btn3">输入框</button> <br> <button id="btn4">百度</button> <button id="btn5">刷新</button> <br> <button id="btn6">回到顶部</button> <br> <button id="btn7">打开页面</button> <button id="btn8">关闭</button> <br> <button id="btn9">前进</button> <button id="btn10">后退</button> <br> <button id="btn11">localStore存</button> <button id="btn12">localStore取</button> <button id="btn13">localStore删</button> <button id="btn14">localStoreclear</button> <br> <button id="btn15">sessionStorage存</button> <button id="btn16">sessionStorage取</button> <button id="btn17">sessionStorage删</button> <button id="btn18">sessionStorageclear</button> </body> </html>
详解
