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>3.元素滚动scroll系列
案例：仿淘宝固定右侧侧边栏
1.原先侧边栏是绝对定位
2.当页面滚动到一定位置侧边栏改为固定定位
3.页面继续滚动，会让返回顶部显示出来
。。。。
4.动画函数封装
4..1动画实现原理
<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>4.2动画函数简单封装
注意函数需要传递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>10.记住用户名
<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>