李天下

本人的博客用来记录自己学前端的过程,原文一般在简书上编写,然后再转到CSDN上,欢迎大家关注我的简书账号李天下xuehttps://www.jianshu.com/u/6a5a59205601...

BOM学习

一、BOM简介

image.png
image.png
image.png

image.png

image.png
刚才犯了一个特别智障的错误,在css里写注释语句,写成了//然后就一直觉得哪不对,额,智障啊
* HTML 注释
* CSS注释 /* */
* JavaScript 注释 //

二、定时器

image.png

<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判断语句

image.png
image.png

返回顶部代码如下

<!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>

image.png
定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
</head>
<body>
<script>
    //第一种定时器,每隔多长时间执行
    // var i = 1;
    // var  timer = setInterval(function(){
    //
    //     console.log(Math.random());
    //     if(i==10){
    //         clearInterval(timer);
    //     }
    //     i++;
    // },500)

    //第二种定时器 只执行一次
    setTimeout(function(){
        console.log(Math.random());
    },500)


</script>
</body>
</html>

image.png
image.png

三、history对象
image.png
image.png

四、location对象
image.png
image.png

image.png
image.png

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

BOM学习

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭