6.案例：通过键盘事件改变光标位置
按任意键，将光标聚焦到输入框
<body>
<input type="text"></input>
<script>
var search=document.querySelector('input');
document.addEventListener('keyup',function(e){
if(e.keyCode>0){
console.log('yes');
search.focus();
}
});
</script>
</body>
7.快递单号查询效果（字体放大）
<style>
.fada{
width:200px;
height:28px;
background-color:pink;
font-size:20px;
border:1px solid black;
border-radius:5px;
}
.sanjiao{
width:0px;
height:0px;
border-style: solid;
border-width: 10px;
border-color: pink transparent transparent;
position: relative;
left:30px;
}
input{
position: absolute;
top:50px;
}
</style>
<body>
<div id="fangda" ></div>
<div id="sanjiao" ></div>
<input type="text" placehoder="请输入您的信息" style="font-size:10px;"></input>
<script>
var div=document.querySelector('#fangda');
var sanjiao =document.querySelector('#sanjiao');
var input = document.querySelector('input');
input.addEventListener('keyup',function(e){
div.className="fada";
sanjiao.className="sanjiao";
div.innerText=input.value;
if(input.value==''){
div.className='';
sanjiao.className='';
}
})
input.addEventListener('focus',function(){
div.className="fada";
sanjiao.className="sanjiao";
div.innerText=input.value;
})
input.addEventListener('blur',function(){
div.className='';
sanjiao.className='';
div.innerText='';
})
</script>
</body>
6.BOM
window,而DOM运行：document
①BOM简介
浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互效果
核心对象：window
DOM：文档对象模型
DOM就是把【文档】当作一个【对象】来看待
DOM的顶级对象是document
DOM主要学习的是操作页面元素
DOM是W3C标准规范
BOM：浏览器对象模型
把【浏览器】当作一个【对象】来看待
BOM的顶级对象是window
BOM学习的是浏览器窗口交互的一些对象
BOM是浏览器厂商在各自浏览器上定义的，兼容性差
②window对象常见事件
Ⅰ.窗口加载事件
window.οnlοad=function(){}
window.addEventListener(“load”,function(){})
window.onload是窗口加载事件，当文档内容加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数
注意
1.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数
2.window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
Ⅱ.窗口加载事件(不包括样式表，图片，flash等等)
document。addEventListener(‘DOMContentLoaded’,function(){})
DOMContentLoaded事件出发时，仅当DOM加载完成，不包括样式表，图片，flash等等
如果页面的图片很多的话，从用户访问到onload触发可能需要较长的事件，交互效果就不能实现，必然影响用户体验，此时用DOMContentLoaded事件比较合适
<body>
<script>
//在页面全部加载完毕后才进行处理
window.addEventListener('load',function(){
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
alert('你好，世界');
})
})
window.addEventListener('load',function(){
alert(22);
})
window.addEventListener('DOMContentLoaded',function(){
alert(33);
})
//load等页面内容全部加载完毕，包含页面dom元素 图片 flash css等
//DomContentLoaded是DOM加载完毕，不包含图片flash css等就可执行 加载速度比load更快
</script>
<button>hello world
</button>
</body>
Ⅲ.调整窗口大小事件
window.οnresize=function(){}
window.addEventListener(“resize”,function(){});
window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数
注意：
1.只要窗口大小发生像素变化，就会出发这个事件
2.我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度
<body>
<div style="width:200px;height:200px;background-color:pink;"></div>
<script>
di---------v=document.querySelector('div');
window.addEventListener('resize',function(){
console.log("大小修改了当前大小为："+window.innerWidth);
if(window.innerWidth<=800){
div.style.display='none';
}
else div.style.display='block'
})
</script>
</body>
③定时器
setTimeout() 一段时间过后，只调用一次
window.setTimeout(调用函数，[延迟毫秒数])；
在定时器到期后执行调用函数
clearTimeout()
window.clearTimeout(timeout ID)
setInterval() 每隔一段时间，就去调用一次，循环播放
window.setInterval(回调函数，[间隔时间])
setInterval()方法重复调用一个函数，每隔这个事件，就去调用一次回调函数
1.window可以省略
2.这个调用函数可以直接写函数，或者写函数名或者采用字符串 ‘函数名()’ 三种形式
3.间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
clearInterval()
window.clearInterval(intervalID)；
1.window可以省略
2.里面的参数就是定时器的标识符
<body>
<div style="width:200px;height:200px;background-color:pink;">我是一个盒子，我等下就没了，你陪我一下</div>
<button>点击这里，上面那个盒子就不会消失了</button>
<button>点击这里，我就不会打扰你了</button>
<script>
var div = document.querySelector('div');
var btn=document.querySelectorAll('button');
function fn(){
alert('第一个延迟事件后,你的盒子没了');
div.style.display='none';
}
function fn2(){
alert('一段时间过去了');
}
var timer = setTimeout(fn,5000);
var timer2 = setInterval(fn2,3000);
btn[0].addEventListener('click',function(){
clearTimeout(timer);
})
btn[1].addEventListener('click',function(){
clearInterval(timer2);
})
</script>
</body>
倒计时：
<body>
<div style="width:200px;height:200px;background-color:pink;font-size:20px;"></div>
<script>
var div = document.querySelector('div');
var time=6;
function fn2(){
if(time>0){time-=1;
div.innerText=time;
if(time==0)div.innerText='时间到了你被判了死刑';
}
}
//提前调用一次，是为了防止第一次刷新页面有空白
fn2();
var timer2 = setInterval(fn2,1000);
</script>
</body>
发送短信案例
<body>
<button>发送短信</button>
<input type="text" placeholder="电话号"></input>
<script>
var btn=document.querySelector('button');
var input=document.querySelector('input');
//var a=5;
btn.addEventListener('click',function(e){
var a=5;
//鼠标禁用
btn.disabled=true;
var timer=setInterval(function(){
if(a>0){
btn.innerText=a;
a-=1;
console.log(a);
}
else {
btn.disabled=false;
clearInterval(timer);
btn.innerText='发送短信';
}
},1000);
})
</script>
</body>
this
1.全局作用域或者普通函数中this指向全局对象window（注意定时器里面this也是指向window）
2.方法调用中谁调用this指向谁
3.构造函数中this指向构造函数的实例
④JS执行队列
HTML5提出了Web Worker标准，允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步
同步任务：（按顺序执行）
同步任务都在主线程上执行，形成一个执行栈
异步任务：（多个可以同时进行）
JS的异步是通过回调函数实现的
1.普通事件，如click、resize等
2.资源加载，如load、error等
3.定时器，如setInterval、setTimeout等
执行机制
1.先执行执行栈中的同步任务
2.异步任务（回调函数）放到任务队列中
3.继续执行执行栈中的同步任务
4.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
观察以下代码，均输出 12 3
<body>
<script>
console.log('1');
setTimeout(function(){
console.log('3');
},1000);
console.log('2');
</script>
</body>
<body>
<script>
console.log('1');
setTimeout(function(){
console.log('3');
},0);
console.log('2');
</script>
</body>
<body>
<script>
console.log('1');
document.onclick=function(){
console.log('click');
}
console.log('2');
setTimeout(function(){
console.log('3');
},3000);
//若在3出来前点击则先输出click
</script>
</body>
今天是原本订的计划的截止日期，我没能完成任务，还是继续加油叭
408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
