目录
页面加载事件
-
load
页面所有元素加载完毕才执行
window.addEventListener('load', function () { var btn = document.querySelector('button'); btn.onclick = function () { alert('1'); } }) -
DOMContentLoaded
DOM元素加载完毕执行，不包含图片 falsh css 等 加载速度比 load 快
window.addEventListener('DOMContentLoaded', function () { alert('3'); })
调整窗口大小
-
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' } })
定时器
-
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
-
清除setTimeou
<script> var btn = document.querySelector('button'); var timer = setTimeout(function() { alert('三秒倒计时已结束'); },3000) btn.addEventListener('click', function(){ // clearTimeout 清除定时器 clearTimeout(timer); alert('倒计时已暂停') }) </script> -
setInterval
每隔这个延时时间就调用一次调用函数
var time = 1; setInterval(function() {console.log(time++);},1000) -
清除setInterval
stop.addEventListener('click', function () { console.log('暂停计时'); clearInterval(timer); })
location
-
href
location 位置 href 超链接 location.href 跳转至超链接的位置
location.href = 'http://127.0.0.1:5500/js/BOM/08two.html'; -
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> -
常见方法
<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
-
前进 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>