一、BOM简介
刚才犯了一个特别智障的错误,在css里写注释语句,写成了//然后就一直觉得哪不对,额,智障啊
* HTML 注释
* CSS注释 /* */
* JavaScript 注释 //
二、定时器
<script>
var i =0;
var timer = setInterval(function(){
i++;
console.log(i);
if(i==10){
clearInterval(timer);//setInterval 得到的值是个数据,标识这个定时器,然后,clearInterval 里的参数就是这个返回值
}
},1000);
</script>
滚动条距上面的距离
var iScrollTop = document.documentElement.scrollTop;
在IE浏览器中,这样写
document.body.scrollTop
那用哪个呢,得先判断下当前浏览器支不支持
if(document.documentElement.scrollTop){
iScrollTop = document.documentElement.scrollTop;
}else{
iScrollTop = document.body.scrollTop;
}
var iScrollTop = document.documentElement.scrollTop||document.body.scrollTop;//这一句能代替if else判断语句
返回顶部效果代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>肖战快到碗里来</title>
<style>
*{
margin:0;
padding:0;
}
body{
height: 2000px;
}
#go-top{
width: 35px;
height: 74px;/*行级元素不能设置宽高,要定位*/
background: url("go-top.jpg") -100px 0 no-repeat;
position: fixed;/*固定定位,相对于浏览器,不管滚动条如何变化,他始终在右下角*/
bottom: 50px;
right: 50px;
}
#go-top:hover{
background: url("go-top.jpg") -300px 0 no-repeat;
}
</style>
</head>
<body>
<h1>肖战我爱你</h1>
<a href="javascript:;" id="go-top"></a><!--javascript :; 是伪协议,这样做的目的是让a被点击后,不会因为#而-->
<!--刷新页面,回到页面顶部-->
<!--#: href="#" 的话,点击a,页面会刷新来到顶部-->
<script>
var oBtn = document.getElementById("go-top");
oBtn.onclick = function(){
// window.scrollTo(0,300);
// 写300的话,它就会直接跳到300那里,没有动画效果,要想慢点挪过去,就要用定时器做
//当点击按钮的时候,就先获取当时滚动条距离上面的距离,然后再用定时器一点点减少距离
var iScrollTop = document.documentElement.scrollTop||document.body.scrollTop;//这一句能代替if else判断语句
var timer = setInterval(function(){
window.scrollTo(0,iScrollTop*=0.6);//让滚动条移动到,当前滚动条位置-50的位置上
console.log(iScrollTop);
if(iScrollTop<=1){
clearInterval(timer);
}
},100);
}
// if(document.documentElement.scrollTop){
// iScrollTop = document.documentElement.scrollTop;
// }else{
// iScrollTop = document.body.scrollTop;
// }
</script>
</body>
</html>