split(分割字符串),网页访问，history历史记录，js指令滚动，页面过大被盖住距离的获取

江河i

已于 2022-07-26 09:55:31 修改

阅读量447

点赞数

分类专栏： Js 文章标签： js

于 2021-01-08 20:48:08 首次发布

本文链接：https://blog.csdn.net/z18237613052/article/details/112366316

版权

Js 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

split(分割字符串)

会改变原数组

        返回值：分割好的字符串组成的 数组 ！！： 苏轼|辛弃疾|李商隐 =》[苏轼,辛弃疾,李商隐]

 split（separator，howmany）

separator：必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。

howmany：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

返回值

  <script>
    var str = "How|are|you|doing|today?"
    var add = (str.split("|"));
    console.log(add); // ["How", "are", "you", "doing", "today?"]
    console.log(str.split("|", 3)) // ["How", "are", "you"]
</script>

我们可以这样分割

"2:3:4:5".split(":")	//将返回["2", "3", "4", "5"]

还可以分割成单词

"hello".split("")	//可返回 ["h", "e", "l", "l", "o"]

解析查询字符
1.“”
2.?name=zhangsan&age=18
步骤：
1.需要准备一个函数进行解析，这个函数还需要一个参数。
参数：要解析的字符串
2.开始解析
1.判断如果为空字符串，直接返回空对象。
2.如果不是空字符串，解析字符串，并将结果放入对象中。
（1）截取掉第一个字符。
（2）剩余字符按照&进行分割，得到一个数组。
（3）遍历数组，得到 “属性名=属性值”这样格式的字符串。
（4）对每一个字符串，按照=分割，得到一个属性和属性值组成的数组。
（5）将属性名和属性值赋值给对象 //obj[t[0]]=t[1];
（6）返回对象。

Bom操作浏览器部分功能的

location对象：里面存储了和网页地址所有内容有关的信息。

https://baike.baidu.com/item/%E9%A9%AC%E4%BF%9D%E5%9B%BD/50106525?fr=aladdin#2_1
在这里插入图片描述

http https 传输协议

www.baidu.com 域名

?fr=aladdin 查询字符

#2_1 hash（锚点定位）

location对象：
里面存储了和网页地址所有内容有关的信息。
属性：
href：地址信息。
跳转页面：location.href = “XXX”;

 location.href = "https://www.pay.qq.com";

search：查询字符串一般是用于传输数据，需要进行解析。

【注意】location.href需要等页面加载完后再调用。

方法：
assign()：改变浏览器地址栏中的地址，并记录到历史中。
【注意】设置location.href 就会调用assign方法（当访问href后就会有历史记录）。
replace() 替换浏览器地址栏中的地址。(替换后不能后退)
reload() 重新加载 F5
reload(true) 强制加载，不适用缓存。

<script>
        window.onload = function() {
            btn.onclick = function() {
                //当点击刷新时进入这个网站
               // location.href = "https://www.baidu.com";
                // location.assign("https://www.baidu.com");
                // location.replace("https://www.baidu.com");//不能后退
                //这三个以及a标签都能访问地址,区别location.replace不能后退


                // location.reload();刷新当前页面
            }
        }
    </script>
</head>

<body>
    <button id="btn">刷新</button>
    <a href="https://www.baidu.com">刷新</a>
</body>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.οnlοad=function(){
            setInterval(href2,2000);//当页面加载后两秒后调用这个函数
        }
        function  href2(){
            location.href = "https://www.pay.qq.com";
        }
    </script>
</head>
<body>
    2秒后跳转到支付页面
</body>
</html>

navigator：获取浏览器客户端的一些信息。（没啥用)

 <script>
     console.log(navigator.userAgent);
     console.log(navigator.appName);
     console.log(navigator.platform);
 </script>

history:保存当前窗口的历史记录

history:保存当前窗口的历史记录，里面包含了一些操作历史记录的属性和方法
【注意】不是浏览器中的历史记录

1.属性
length:返回历史记录的条数。

2.方法：
back():
语法：history.back();
作用:类似浏览器上面的后退键，回退到上一条历史记录中。
forward():
语法：history.forward();
作用:类似浏览器上面的前进键，前进到下一条历史记录中。
go(n):
语法：history.go(n); n表示整数
正整数：表示前进
0：刷新当前页面
负整数：表示后退
作用：跳转n条记录记录。

<!DOCTYPE html>
<html lang="ch-ZN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A界面</title>
    //做的a和b页面来回跳转（当我多次点击a页面和b页面的来回跳转，他就拥有了多个历史记录）
    <script>
        window.οnlοad=function(){//在页面加载之前执行这个函数
            btn.οnclick=function(){//当点击btn的时候执行这个函数
            history.forward();//执行这个函数的内容是前进到下一个历史记录
             alert(history.length);//执行这个函数的内容是弹出历史记录的条数
        }
        gobtn.onclick = function(){//当点击gobtn的时候执行这个函数
                history.go(1);//执行这个函数的内容是前进到下一个历史记录
                //当他为1或-1时就为前进后退一条历史记录等同与forward()前进back()后退
                //为2或更大是前进2条或更多历史记录（
            }
        }
       
    </script>
</head>
<body>
    我是a页面
    <a href="b.html">跳转到b页面</a>
    <button id="btn">前进</button>
    <button id="gobtn">go</button>  
</body>
</html>

<!DOCTYPE html>
<html lang="ch-ZN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B界面</title>
    <script>
        window.οnlοad=function(){
            btn.οnclick=function(){
            history.back();
        }
        gobtn.onclick = function(){
                history.go(-1);
            }
        }
       
    </script>
</head>
<body>
    我是b页面
    <a href="a.html">跳转到a页面</a>
    <button id="btn">后退</button>
    <button id="gobtn">go-1</button>
    
</body>
</html>

document.documentElement.scrollTop卷去的高度

获取页面滚动距离pageYOffset、scrollY、scrollTop区别
当页面的宽高比较大时，会出现滚动条，一部分内容会随着页面的滚动而被隐藏。
我们管上面隐藏的叫做卷去的高度
左边隐藏的宽，叫做卷去的宽度。

document.documentElement.scrollTop（html的高度）
获取卷去的高度使用时页面中必须要有DOCTYPE标签。
document.body.scrollTop（body的高度）
获取卷去的高度，使用时，页面中没有DOCTYPE标签。
document.body.scrollLeft获取卷去的宽度
兼容写法：
在这里插入图片描述

   var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;

在这里插入图片描述
案例：将浏览器卷的高度和宽度输出到控制台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width: 3000px;
            height: 2000px;
            background-color: green;
        }
    </style>
    <script>/
        window.οnlοad=function(){
            //获取卷去的高度，这里是兼容写法，当左边或右边有一边为真就为真
            var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
            console.log(scrollTop);
            //获取卷去的宽度
            var scrollLeft = document.body.scrollLeft||document.documentElement.scrollLeft;
            console.log(scrollLeft);
        }
    </script>
</head>
<body>   
</body>
</html>

window.scroll滚动

可以通过js代码来指定浏览器滚动到什么位置上。window.scroll

第一种方式：
格式：window.scroll(横坐标，纵坐标)；
【注意】不需要书写单位，瞬间定位。

第二种方式：
window.scroll({
left:200,
top:600,
behavior:‘smooth’
});
behavior:可以决定滚动的方式，默认为 auto 瞬间定位，可以设置为smooth 平滑过渡。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<script>
    window.onload = function () {
        btn.onclick = function () {
            window.scroll( {   top: 0,behavior: 'smooth'} );//注意这种写法
        }
    }
</script>

</head>

<body>
    
    <p>穿过挪威的森林，让我走进你的梦里，夕阳落在我的铠甲，
    王子不一定骑着白马，黑马王子四海为家，现在是晚上18:00，我不是马思唯，也没有王子陪</p>
    <br>很多个p很多个换行这里我只写了一个
 
    <button id="btn">滚动</button>
</body>

</html>

例子：自定义点击后滚动的速度，并且并且鼠标点击后停止滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var timer = null;

        window.onload = function () {
            btn.onclick = function () {
                timer = setInterval(
                   
                    strer , 50)
            }
              function  strer () {
                      document.documentElement.scrollTop -= 20;
                        if (document.documentElement.scrollTop <= 0) {
                            clearInterval(timer);
                        }
                    }
        }
        var st = 0;
        window.onscroll = function () {

            if (st< document.documentElement.scrollTop) {
                clearInterval(timer);
            }
            st = document.documentElement.scrollTop;

        }
    </script>
</head>

<body>

    <p>穿过挪威的森林，让我走进你的梦里，夕阳落在我的铠甲，王子不一定骑着白马，黑马王子四海为家，现在是晚上18:00，我不是马思唯，也没有王子陪</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>穿过挪威的森林，让我走进你的梦里，夕阳落在我的铠甲，王子不一定骑着白马，黑马王子四海为家，现在是晚上18:00，我不是马思唯，也没有王子陪</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>穿过挪威的森林，让我走进你的梦里，夕阳落在我的铠甲，王子不一定骑着白马，黑马王子四海为家，现在是晚上18:00，我不是马思唯，也没有王子陪</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>穿过挪威的森林，让我走进你的梦里，夕阳落在我的铠甲，王子不一定骑着白马，黑马王子四海为家，现在是晚上18:00，我不是马思唯，也没有王子陪</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>穿过挪威的森林，让我走进你的梦里，夕阳落在我的铠甲，王子不一定骑着白马，黑马王子四海为家，现在是晚上18:00，我不是马思唯，也没有王子陪</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>穿过挪威的森林，让我走进你的梦里，夕阳落在我的铠甲，王子不一定骑着白马，黑马王子四海为家，现在是晚上18:00，我不是马思唯，也没有王子陪</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <button id="btn">滚动</button>
</body>

</html>

js如何判断一个元素在可视区域内

江河i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
split(分割字符串),网页访问，history历史记录，js指令滚动，页面过大被盖住距离的获取

目录location对象：里面存储了和网页地址所有内容有关的信息。navigator：获取浏览器客户端的一些信息。（没啥用)history:保存当前窗口的历史记录document.documentElement.scrollTop卷去的高度window.scroll滚动例子：自定义点击后滚动的速度，并且并且鼠标点击后停止滚动location对象：里面存储了和网页地址所有内容有关的信息。https://baike.baidu.com/item/%E9%A9%AC%E4%BF%9D%E5%9B%BD/5
复制链接

扫一扫