window常见事件onload
<!-- 有了window.onload就可以把jS代码写到元素的上方,onload是等页面加载完毕,再去执行处理函数 --> <script> /* window.onload = function () { var btn = document.querySelector('button'); btn.addEventListener('click', function () { alert('点击我'); }) } window.onload = function () { alert('222');//window.onload传统的注册事件方式只能写一次,如果有多个,会以最后一个为准 } */ //使用addEventListener可以多次使用,不受限制 window.addEventListener('load' ,function() { var btn = document.querySelector('button'); btn.addEventListener('click' ,function(){ alert('点击了'); }) }) window.addEventListener('load' ,function() { alert('22'); }) //document.addEventListener('DOMContentLoaded', function() {}) //先弹出33 在弹出22 点击后弹出‘点击我’ document.addEventListener('DOMContentLoaded', function() { alert('33'); }) </script> <button>点击</button> //load等页面全部加载完毕,包括dom元素 图片 flash css等 //DOMContentLoaded 是DOM主要标签加载完毕,不包括图片 flash css等就可以执行,加载速度比load更快一些
调整窗口大小的事件
<script> window.addEventListener('load' ,function(){ var div = document.querySelector('div'); window.addEventListener('resize', function(){ console.log('窗口变化了'); console.log(window.innerWidth); //当窗口的宽度小于800 盒子隐藏,大于显示 if (window.innerWidth < 800) { div.style.display = 'none'; }else { div.style.display = 'block'; } }) }) </script> <div></div>
定时器之setTimeout
<script> //1. setTimeout //语法规范: window.setTimeout(调用函数,延迟时间); //①这个window再调用时可以省略 //②这个延迟时间的单位是毫秒 // setTimeout(function(){ // alert('两秒时间到了'); // },2000); //③这个调用函数可以直接写函数,还可以写函数名, function fn () { alert('到了') } var time1 = setTimeout(fn,2000); //④页面中会有很多定时器,我们经常给定时器加标识符(名字) var time2 = setTimeout(fn,3000); </script>
5s后自动关闭广告
<script> window.addEventListener('load',function(){ var img = document.querySelector('img'); setTimeout(imgClose,5000); function imgClose () { img.style.display = 'none'; } }) </script> <img src="images/zhy.png" alt="">
setTimeout定时器
<!-- 五秒前点击按钮可以停止定时器 --> <button>点击停止定时器</button> <script> var time = setTimeout(function(){ console.log('爆炸了'); },5000) var btn = document.querySelector('button'); btn.addEventListener('click' ,function(){ clearTimeout(time); }) </script>
倒计时之setInterval
<script> //1. setInterval(间隔) //语法规范: window.setInterval(调用函数,间隔时间) setInterval(function(){ console.log('每一秒显示一次'); },1000) //2.setTimeout 延迟时间到了就去调用这个回调函数 //3.setInterval 每隔这个延迟时间,就会调用这个回调函数,调用多次。 </script>
倒计时案例
<span class="hour">1</span> <span class="minute">2</span> <span class="second">3</span> <script> //1. 获取元素 var hour = document.querySelector('.hour'); var minute = document.querySelector('.minute'); var second = document.querySelector('.second'); var inputTime = +new Date('2021-11-26 23:00:00');//1970-1-1距离用户输入的时间过了多少毫秒 //开启定时器 setInterval(countDown,1000); function countDown() { var nowTime = +new Date();//括号为空返回的就是当前时间的总毫秒数 var times = (inputTime - nowTime) / 1000;//剩余时间的总秒数 var h = parseInt(times/60/60%24); h = h > 10? h : "0" + h; hour.innerHTML = h; var m = parseInt(times/60%60); m = m > 10? m : "0" + m; minute.innerHTML = m; var s = parseInt(times%60); s = s> 10? s : "0" + s; second.innerHTML = s; } </script>
清除setInterval定时器
<button class="begin">开启定时器</button> <button class="stop">停止计时器</button> <script> var begin = document.querySelector('.begin'); var stop = document.querySelector('.stop'); var time = null;//全局变量 begin.addEventListener('click', function(){ time = setInterval(function(){ console.log('开启定时器了'); },1000) }) stop.addEventListener('click' ,function(){ clearInterval(time); }) </script>
发送短信案例
手机号: <input type="number"> <button>发送</button> <script> var input = document.querySelector('input'); var btn = document.querySelector('button'); var time = 3; btn.addEventListener('click' ,function(){ btn.disabled = true; var dsq = setInterval(function(){ if (time == 0) { btn.disabled = false; btn.innerHTML = '发送'; clearInterval(dsq); time = 3; }else { btn.innerHTML = '还剩' + time + '秒'; time--; } },1000) }) </script>
this指向问题
<button>点击</button> <script> //this指向问题 一般情况下this的最终指向的是那个调用它的对象 //1.全局作用域或者普通函数中的this指向全局对象window console.log(this); function fn() { console.log(this); } fn(); setTimeout(function(){ console.log(this); },1000) //2.方法调用中谁调用this指向谁 var o = { sayHi: function () { console.log(this);//this指向o对象 } } o.sayHi(); var btn =document.querySelector('button'); btn.onclick =function () { console.log(this);//button按钮 } btn.addEventListener('click',function(){ console.log(this);//button按钮 }) //3.构造函数中this指向构造函数的实例 function Fun() { console.log(this);//Fun } var fun = new Fun(); </script>
js的执行机制
<script> //第一个问题132 console.log(1);//同步任务 setTimeout(function () { console.log(2); }, 3000)//回调函数:异步任务 console.log(3); //第二个问题132 console.log(1); setTimeout(function () { console.log(2); }, 0) console.log(3); </script>
5秒后自动跳转
<button>点击</button> <div></div> <script> //点击按钮跳转百度 var btn = document.querySelector('button'); btn.addEventListener('click', function () { // console.log(location.href); location.href = 'https://www.baidu.com/'; }) //过五秒自动跳转 var time = 5; var div = document.querySelector('div'); setInterval(function () { if (time != 0) { div.innerHTML = '还剩' + time + '秒跳转百度'; time--; }else { location.href = 'https://www.baidu.com/' } }, 1000) </script>
获取URL参数
login页面
<form action="index.html"> 用户名:<input type="text" name="umane"> <input type="submit" value="登录"> </form>
index页面
<div></div> <script> console.log(location.search);//?umane=lwj //1.先去掉? substr('起始位置',截取几个字段); var params = location.search.substr(1);//从索引为1开始,截取到最后 console.log(params);//umane=lwj //2. 利用=把字符串分割成数组 split('='); var arr = params.split('='); console.log(arr);//['umane', 'lwj'] var div = document.querySelector('div'); //把数据写入div中 div.innerHTML = arr[1] + '欢迎您'; </script>
login
index
location的常用方法
<button>点击</button> <script> var btn = document.querySelector('button'); btn.addEventListener('click' ,function () { //跳转百度 assgin分配 记录浏览历史,可以后退 // location.assign('http://www.baidu.com/') //reolace替代 不记录浏览历史 不可后退 // location.replace('http://www.baidu.com/'); //reload重新加载 点了相当于刷新 location.reload('http://www.baidu.com/'); }) </script>
navigator
history对象
首页
<a href="30history跳转页面.html">点我前进</a> <button>后退</button> <script> var btn = document.querySelector('button'); btn.addEventListener('click',function(){ // history.forward() history.go(1) }) </script>
跳转页:
<a href="30history对象.html">点我前进</a> <button>后退</button> <script> var btn = document.querySelector('button'); btn.addEventListener('click',function(){ // history.back() history.go(-1); }) </script>