3.3、JavaScript定时器、URL编解码、JSON、BOM、弹窗

ShawnYue_08

于 2020-07-13 18:30:55 发布

阅读量146

点赞数

分类专栏：前端三剑客

本文链接：https://blog.csdn.net/ShawnYue_08/article/details/107322629

版权

前端三剑客专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

JSON
定时器
URL编解码
BOM

JSON

json是什么

JavaScript Object Notation，JS对象简谱，是一种轻量级的数据交换格式。

早期，所有的数据传输习惯使用XML文件。

格式：

对象：{}
数组：[]
所有的键值对：key : value

JSON字符串和JS对象的区别

var person = {
    name: "张三",
    age: 23,
    gender: "男"
};

// 对象转换为json字符串
var str = JSON.stringify(person);
console.log(str);
// {"name":"张三","age":23,"gender":"男"}
console.log(typeof str);
// string

// json字符串转换为对象
person = JSON.parse(str);
console.log(typeof person);
// object

定时器

setTimeout()

<!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>
    <script>
        function show() {
            alert("定时器");
        }
        /* 定时器ID */
        var timeId = setTimeout(show, 2000);
        /* 间隔2s执行show方法 */

        /* 取消这个定时器 */
        clearTimeout(timeId);
    </script>
</body>
</html>

setInterval

<!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>
    <script>
        var i = 0;
        function show() {
            i++;
        }

        /* 设置循环定时器 */
        setInterval(show, 1000);

        /* 循环定时器：每隔1s输出i，箭头函数形式 */
        setInterval(() => document.write(i), 1000);

    </script>
</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 src="js/moment.js"></script>
</head>

<body>
    <h1 id="time"></h1>

    <script>
        var timeId = setInterval(function () {
            var str = moment().format("YYYY-MM-DD HH:mm:ss");
            document.getElementById("time").innerHTML = str;
        }, 1000);
    </script>

    <button onclick="clearInterval(timeId)">关闭计时器</button>

</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>
    <script>
        // URL编码
        var str = encodeURIComponent("张三");
        document.write(str, "<br>");
        // %E5%BC%A0%E4%B8%89

        // URL解码
        var s = decodeURIComponent(str);
        document.write(s, "<br>");
        // 张三
    </script>
</body>
</html>

BOM

BOM（Browser Object Model）：浏览器对象模型。

window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window尺寸

<!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>
    <script>
        console.log(window.innerWidth);
        //1536
        // console.log(innerWidth);
        console.log(window.innerHeight);
        //722
        // console.log(innerHeight);

        console.log(window.document);
        // console.log(document);
    </script>
</body>
</html>

在这里插入图片描述

navigator对象

window.navigator 对象在编写时可不使用 window 这个前缀。

navigator封装了浏览器的信息。

<!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>
    <script>
        var txt = "浏览器代号:" + navigator.appCodeName + "<br>浏览器名称:" + navigator.appName + "<br>浏览器版本:" +
            navigator.appVersion + "<br>启用Cookie:" + navigator.cookieEnabled + "<br>硬件平台:" + navigator.platform;
        document.write(txt);
    </script>
</body>
</html>

Chrome浏览器

浏览器代号:Mozilla
浏览器名称:Netscape
浏览器版本:5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36
启用Cookie:true
硬件平台:Win32

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：navigator 数据可被浏览器使

用者更改。

screen对象

window.screen 对象包含有关用户屏幕的信息。

window.screen对象在编写时可以不使用 window 这个前缀。

document.write(screen.width,"-",screen.height,"<br>");
// 1536-864
document.write(screen.availWidth,"-",screen.availHeight, "<br>");
// 1536-824

location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window.location 对象在编写时可不使用 window 这个前缀。一些例子：

一些实例:

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）

在这里插入图片描述

window.location.assign(url)：加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

window.location.replace(url)：通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的。

document对象

window.document对象代表当前的页面。

history对象

window.history对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同

JavaScript弹窗

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

window.alert("sometext")

window.alert() 方法可以不带上window对象，直接使用**alert()**方法。

<!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 onclick="alert('你好，我是一个警告框')">显示警告框</button>
</body>
</html>

确认框

当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。

当你点击 “确认”, 确认框返回 true，如果点击 “取消”, 确认框返回 false。

window.confirm("sometext")

window.confirm() 方法可以不带上window对象，直接使用**confirm()**方法。

<!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>
    <a href="javascript:void(toBaiDu())">跳转到百度首页</a>

    <script>
        function toBaiDu() {
            if (confirm("你是否要前往百度首页？")) {
                window.open("https://www.baidu.com");
            }
        }
    </script>
</body>
</html>

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

window.prompt("sometext","defaultvalue");

window.prompt() 方法可以不带上window对象，直接使用**prompt()**方法。

<!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>
    <p>点击下面的按钮</p>
    <button onclick="myFunction()">按钮</button>
    <p class="demo"></p>
    <script>
        function myFunction() {
            var person = prompt("请输入你的姓名", "张三");
            if (person != null && person !== "") {
                var str = "你好，" + person + "，今天进步了没？";
                document.getElementsByClassName("demo")[0].innerText = str;
            }
        }
    </script>
</body>
</html>