1.BOM概述
1.1什么是BOM
1.2BOM的构成
BOM比DOM更大，包含DOM
3.定时器
3.2setTimeout()定时器
案例：5秒后自动关闭的广告
分析：
5秒之后，就把这个广告隐藏起来
用定时器setTimeout
<body>
<img src="1.jpg" alt="" class="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(function(){
ad.style.display = 'none';
},5000);
</script>
</body>
3.3停止setTimeout()定时器
<body>
<button>点击停止定时器</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function(){
console.log('爆炸了');
},5000);
btn.addEventListener('click',function(){
clearTimeout(timer);
})
</script>
</body>
3.定时器
案例：发送短信案例
点击按钮后，该按钮60秒内不能再次点击，防止重复发送短信
分析：
<body>
手机号码：<input type="number"> <button>发送</button>
<script>
var btn = document.querySelector('button');
var time = 60;//定义剩下的秒数
btn.addEventListener('click',function(){
btn.disabled = true;
var timer = setInterval(function(){
if(timer == 0){
//清除定时器和复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time = 60;//这个3需要从新开始
}else{
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
},1000);
})
</script>
</body>
5.location对象
案例：5秒后跳转页面
分析：
<body>
<button>点击</button>
<div></div>
<script>
var btn = document.querySelector('button',);
var div = document.querySelector('div');
btn.addEventListener('click',function(){
location.href = 'http:www.baidu.com';
})
var timer = 5;
setInterval(function(){
if(timer == 0){
location.href = 'http:www.baidu.com';
}else{
div.innerHTML = '您将在'+ timer +'秒钟之后跳转到页面';
timer--;
}
},1000);
</script>
</body>
动画函数封装
动画实现原理
<style>
div{
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
var timer = setInterval(function(){
if(div.offsetLeft >= 400){
//停止动画 本质是停止定时器
clearInterval(timer);
}
div.style.left = div.offsetLeft + 1 + 'px';
},30);
</script>
动画函数简单封装
注意函数需要传递2个参数，动画对象和移动到的距离
<style>
div{
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
span{
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<span>秋天</span>
<script>
//简单动画函数封装
function animate(obj,target){
var timer = setInterval(function(){
if(obj.offsetLeft >= target){
//停止动画 本质是停止定时器
clearInterval(timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
},30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
//调用函数
animate(div,300);
animate(span,200);
</script>
记住用户名
<body>
<input type="text" id="username"> <input type="checkbox" name="" id="remember">记住用户名
<script>
var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
if(localStorage.getItem('username')){
username.value = localStorage.getItem('username');
remember.checked = true;
}
remember.addEventListener('chang',function(){
if(this.checked){
localStorage.setItem('username',username.value)
}else{
localStorage.removeItem('username');
}
})
</script>