BOM学习

最新推荐文章于 2024-04-07 09:02:16 发布

李天下xue

最新推荐文章于 2024-04-07 09:02:16 发布

阅读量356

点赞数

本文链接：https://blog.csdn.net/xuehangongzi/article/details/80335947

版权

一、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>

定时器

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