Web BOM Location-CSDN博客

本文链接：https://blog.csdn.net/qq_44702163/article/details/109959810

Location对象

在这里插入图片描述

自动跳转页面

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

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

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener("click", function () {
            location.href = "http://www.csdn.com";

        })
        var time = 5 ;
        setInterval(function () {
            if (time == 0) {
                location.href = "http://www.baidu.com";
            } else {
                div.innerHTML = "您将在" + time + "秒钟内跳转到首页";
                time--;
            }
        }, 1000)
    </script>
</body>

</html>

获取URL参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <form action="获取URL参数实例_index.html">
        <input type="text" name="uname" >
        <input type="submit" value="登陆">
    </form>
    
</body>
</html>

获取URL参数实例_index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script>
        console.log(location.search);
        var params  = location.search.substr(1);//从 字符串第二个字符截取   ?uname=asd(测试实例输入asd)
        var arr = params.split("=");//以=号为基准截取字符串
        var div = document.querySelector('div');
        div.innerHTML = arr[1]+'欢迎您！';//选取用户名数据输出
        // console.log(arr[1]+"欢迎您！");
    </script>
</body>
</html>