JavaScript - BOM

最新推荐文章于 2020-12-23 15:48:19 发布

S_numb

最新推荐文章于 2020-12-23 15:48:19 发布

阅读量572

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/S_numb/article/details/103895146

版权

Java 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

这篇文章参考内容分为两部分：

西部开源-秦疆老师；
https://www.w3school.com.cn/h.asp；

文章目录

- BOM

BOM

JavaScript Window - 浏览器对象模型

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。

1.1 JS Window

1. Window 对象

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

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

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

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

甚至（HTML DOM 的）document 对象也是 window 对象属性：

window.document.getElementById("header");
//等同于
document.getElementById("header");

2. 窗口尺寸

两个属性可用用于确定浏览器窗口的尺寸。

这两个属性都以像素返回尺寸：

window.innerHeight - 浏览器窗口的内高度（以像素计）
window.innerWidth - 浏览器窗口的内宽度（以像素计）

浏览器窗口（浏览器视口）不包括工具栏和滚动条。

对于 Internet Explorer 8, 7, 6, 5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或

document.body.clientHeight
document.body.clientWidth

一个实用的 JavaScript 解决方案（包括所有浏览器）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>窗口尺寸</title>
</head>

<body>
<div>
    <p id="demo"></p>
</div>

<script>
    var w = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;

    var h = window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;

    var x = document.getElementById("demo");
    x.innerHTML = "浏览器内窗宽度：" + w + "，高度：" + h + "。";
</script>

</body>

</html>

结果：该例显示浏览器窗口的高度和宽度：（不包括工具栏和滚动条）
在这里插入图片描述
3. 一些其他的窗口方法

一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口

1.2 JS Screen

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

1. Window Screen

window.screen 对象不带 window 前缀也可以写：

属性	方法
screen.width	返回以像素计的访问者屏幕宽度。
screen.height	返回以像素计的访问者屏幕的高度。
screen.availWidth	返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。
screen.availHeight	返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。
screen.colorDepth	返回用于显示一种颜色的比特数。
screen.pixelDepth	返回屏幕的像素深度。

2. Window Screen 宽度

screen.width 属性返回以像素计的访问者屏幕宽度。

案例：显示以像素计的屏幕宽度

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<p id="demo"></p>

<script>
    document.getElementById("demo").innerHTML =
        "屏幕宽度是：" + screen.width;     //屏幕宽度是：1440
</script>
</body>

</html>

3. Window Screen 高度

screen.height 属性返回以像素计的访问者屏幕的高度。

实例：显示以像素计的屏幕高度

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<p id="demo"></p>

<script>
    document.getElementById("demo").innerHTML = 
    "屏幕高度是：" + screen.height;     //屏幕高度是：900
</script>
</body>
    
</html>

4. Window Screen 可用宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。

实例：显示以像素计的屏幕可用宽度

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<p id="demo"></p>

<script>
    document.getElementById("demo").innerHTML = 
	"可用屏幕宽度是：" + screen.availWidth;     //可用屏幕宽度是：1440
</script>
</body>
    
</html>

5. Window Screen 可用高度

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。

实例：显示以像素计的屏幕可用高度

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<p id="demo"></p>

<script>
    document.getElementById("demo").innerHTML = 
	"可用屏幕高度是：" + screen.availHeight;     //可用屏幕高度是：900
</script>
</body>
    
</html>

6. Window Screen 色深

screen.colorDepth 属性返回用于显示一种颜色的比特数。

所有现代计算机都使用 24 位或 32 位硬件的色彩分辨率：

24 bits =16,777,216 种不同的 “True Colors”
32 bits = 4,294,967,296 中不同的 “Deep Colors”

更老的计算机使用 14 位：65,536 种不同的 “High Colors” 分辨率。

异常古老的计算机，以及老式的手机使用 8 位：256 中不同的 “VGA colors”。

实例：显示以位计的屏幕色彩深度

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<p id="demo"></p>

<script>
    document.getElementById("demo").innerHTML = 
	"屏幕色深是：" + screen.colorDepth;     //屏幕色深是：24
</script>
</body>
    
</html>

HTML 中使用的 #rrggbb (rgb) 值代表 “True Colors” （16,777,216 中不同的颜色）。

7. Window Screen 像素深度

screen.pixelDepth 属性返回屏幕的像素深度。

实例：显示以位计的屏幕像素深度

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<p id="demo"></p>

<script>
    document.getElementById("demo").innerHTML = 
	"屏幕像素深度是：" + screen.pixelDepth;    //屏幕像素深度是：24
</script>
</body>
    
</html>

对于现代计算机，颜色深度和像素深度是相等的。

1.3 JS Location

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。

1. Window Location

window.location 对象可不带 window 前缀书写。

属性	方法
window.location.href	返回当前页面的 href (URL)
window.location.hostname	返回 web 主机的域名
window.location.pathname	返回当前页面的路径或文件名
window.location.protocol	返回使用的 web 协议（http: 或 https:）
window.location.assign	加载新文档

2. Window Location Href

window.location.href 属性返回当前页面的 URL。

实例：显示当前页面的 href (URL)

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>window.location 对象</h1>
    <p id="demo"></p>
</div>

<script>
    document.getElementById("demo").innerHTML =
        "本页面的完整 URL 是：<br>" + window.location.href;
    //http://localhost:50001/js%E4%BB%A3%E7%A0%81/lesson07/3.location.html?_ijt=556vedc1cq50ebc91ld2dflpvf
</script>
</body>

</html>

3. Window Location 主机名

window.location.hostname 属性返回（当前页面的）因特网主机的名称。

实例：显示主机的名称

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>window.location 对象</h1>
    <p id="demo"></p>
</div>

<script>
    document.getElementById("demo").innerHTML =
        "页面主机名是：" + window.location.hostname;
    //页面主机名是：localhost
</script>
</body>

</html>

4. Window Location 路径名

window.location.pathname 属性返回当前页面的路径名。

实例：显示当前 URL 的路径名

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>window.location 对象</h1>
    <p id="demo"></p>
</div>

<script>
    document.getElementById("demo").innerHTML =
        "页面路径是：" + window.location.pathname;
    //页面路径是：/js%E4%BB%A3%E7%A0%81/lesson07/3.location.html
</script>
</body>

</html>

5. Window Location 协议

window.location.protocol 属性返回页面的 web 协议。

实例：显示 web 协议

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>window.location 对象</h1>
    <p id="demo"></p>
</div>

<script>
    document.getElementById("demo").innerHTML =
        "页面协议是：" + window.location.protocol;
    //页面协议是：http:
</script>
</body>

</html>

6. Window Location 端口

window.location.port 属性返回（当前页面的）互联网主机端口的编号。

实例：显示主机的端口号

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>window.location 对象</h1>
    <p id="demo"></p>
    <p><b>注释：</b>如果端口号是默认值（对于 http 为 80，对于 https 为 443），则大多数浏览器将显示 0 或不显示。</p>
</div>

<script>
    document.getElementById("demo").innerHTML =
        "当前页面的 URL 端口号是：" + window.location.port;
    //当前页面的 URL 端口号是：*****（反正不知道这玩意重要不重要，此处就不展示结果了）
</script>
</body>

</html>

7. Window Location Assign

window.location.assign() 方法加载新文档。

实例：加载新文档

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>window.location 对象</h1>
    <input type="button" value="加载新的文档" onclick="newDoc()">
</div>

<script>
    function newDoc() {
        window.location.assign("http://www.baidu.com")
    }
</script>
</body>

</html>

1.4 JS History

window.history 对象包含浏览器历史。

1. Window History

window.history 对象可不带 window 书写。

为了保护用户的隐私，JavaScript 访问此对象存在限制。

属性	方法
history.back()	等同于在浏览器点击后退按钮
history.forward()	等同于在浏览器中点击前进按钮

2. Window History Back

history.back() 方法加载历史列表中前一个 URL。

这等同于在浏览器中点击后退按钮。

实例：在页面中创建后退按钮

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>window.location 对象</h1>
    <input type="button" value="Back" onclick="goBack()">
</div>

<script>
    function goBack() {
        window.history.back()
    }
</script>
</body>

</html>

3. Window History Forward

history forward() 方法加载历史列表中下一个 URL。

这等同于在浏览器中点击前进按钮。

实例：在页面中创建前进按钮

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>window.location 对象</h1>
    <input type="button" value="Forward" onclick="goForward()">
</div>

<script>
    function goBack() {
        window.history.back()
    }
</script>
</body>

</html>

1.5 JS Navigator

window.navigator 对象包含有关访问者的信息。

1. Window Navigator

window.navigator 对象可以不带 window 前缀来写。

属性	方法
navigator.appName	返回浏览器的应用程序名称
navigator.appCodeName	返回浏览器的应用程序代码名称
navigator.product	返回浏览器引擎的产品名称
navigator.appVersion	返回有关浏览器的版本信息
navigator.userAgent	返回由浏览器发送到服务器的用户代理报头（user-agent header）
navigator.platform	返回浏览器平台（操作系统）
navigator.language	返回浏览器语言

2. 浏览器 Cookie

如果 cookie 已启用，cookieEnabled 属性返回 true，否则返回 false：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>Navigator 对象</h1>
    <p>如果启用了 cookie，则 cookieEnabled 属性返回 true：</p>
    <p id="demo"></p>
</div>

<script>
    document.getElementById("demo").innerHTML =
        "navigator.cookieEnabled 是：" + navigator.cookieEnabled;  //true
</script>
</body>

</html>

3. 浏览器应用程序名称

appName 属性返回浏览器的应用程序名称：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>Navigator 对象</h1>
    <p>appName 属性返回浏览器的应用程序名称：</p>
    <p id="demo"></p>
    <p>奇怪的是，“Netscape” 是 IE11、Chrome、Firefox 和 Safari 的应用程序名称。</p>
</div>

<script>
    document.getElementById("demo").innerHTML =
        "navigator.appName 是：" + navigator.appName;  //Netscape
</script>
</body>

</html>

“Netscape” 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。

4. 浏览器应用程序代码名称

appCodeName 属性返回浏览器的应用程序代码名称：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>Navigator 对象</h1>
    <p>appCodeName 属性返回浏览器的代码名称。</p>
    <p id="demo"></p>
    <p>不要依赖它！ “Mozilla” 是 Chrome、Firefox、IE、Safari 和 Opera 的应用程序代码名称。</p>
</div>

<script>
    document.getElementById("demo").innerHTML =
       "navigator.appCodeName 是 " + navigator.appCodeName;  //Mozilla
</script>
</body>

</html>

“Mozilla” 是 Chrome、Firefox、IE、Safari 以及 Opera 的应用程序代码名称。

5. 浏览器引擎

product 属性返回浏览器引擎的产品名称：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>Navigator 对象</h1>
    <p>product 属性返回浏览器的产品名称。</p>
    <p id="demo"></p>
    <p>不要依赖它！大多数浏览器都将 “Gecko” 作为产品名称返回！</p>
</div>

<script>
    document.getElementById("demo").innerHTML =
       "navigator.product 是：" + navigator.product;  //Gecko
</script>
</body>

</html>

6. 浏览器版本

appVersion 属性返回有关浏览器的版本信息：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>Navigator 对象</h1>
    <p>appVersion 属性返回有关浏览器的版本信息：</p>
    <p id="demo"></p>
</div>

<script>
    document.getElementById("demo").innerHTML =
       "navigator.appVersion 是：" + navigator.appVersion;  
    //5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36
</script>
</body>

</html>

7. 浏览器代理

userAgent 属性返回由浏览器发送到服务器的用户代理报头（user-agent header）：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>Navigator 对象</h1>
    <p>userAgent 属性返回浏览器发送给服务器的用户代理标头：</p>
    <p id="demo"></p>
</div>

<script>
    document.getElementById("demo").innerHTML =
       "navigator.userAgent 是：" + navigator.userAgent;
    //Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36
</script>
</body>

</html>

注：

来自 navigator 对象的信息通常是误导性的，不应该用于检测浏览器版本，因为：

不同浏览器能够使用相同名称
导航数据可被浏览器拥有者更改
某些浏览器会错误标识自身以绕过站点测试
浏览器无法报告发布晚于浏览器的新操作系统

8. 浏览器平台

platform 属性返回浏览器平台（操作系统）：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>Navigator 对象</h1>
    <p>platform 属性返回浏览器平台（操作系统）：</p>
    <p id="demo"></p>
</div>

<script>
    document.getElementById("demo").innerHTML =
       "navigator.platform 是：" + navigator.platform;  //Win32
</script>
</body>

</html>

9. 浏览器语言

language 属性返回浏览器语言：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>Navigator 对象</h1>
    <p>language 属性返回浏览器的语言：</p>
    <p id="demo"></p>
</div>

<script>
    document.getElementById("demo").innerHTML =
       "navigator.language 是：" + navigator.language;  //zh-CN
</script>
</body>

</html>

10. 浏览器是否在线？

onLine 属性返回 true，假如浏览器在线：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>Navigator 对象</h1>
	<p>如果浏览器在线，则 onLine 属性返回 true：</p>
    <p id="demo"></p>
</div>

<script>
    document.getElementById("demo").innerHTML =
       "navigator.onLine 是：" + navigator.onLine;  //true
</script>
</body>

</html>

11. Java 是否启用？

javaEnabled() 方法返回 true，如果 Java 已启用：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>Navigator 对象</h1>
	<p>如果启用了 Java，则 javaEnabled() 方法返回 true：</p>
    <p id="demo"></p>
</div>

<script>
    document.getElementById("demo").innerHTML =
       "javaEnabled 是：" + navigator.javaEnabled();  //false
</script>
</body>

</html>

1.6 JS 弹出框

JavaScript 有三种类型的弹出框：警告框、确认框和提示框。

1. 警告框

如果要确保信息传递给用户，通常会使用警告框。

当警告框弹出时，用户将需要单击“确定”来继续。

window.alert("sometext");
等同于
alert("sometext");

实例：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>JavaScript 警告框</h1>
    <button onclick="myFunction()">试一试</button>
</div>

<script>
    function myFunction() {
        alert("我是一个警告框！");
    }
</script>
</body>

</html>

2. 确认框

如果希望用户验证或接受某个东西，则通常使用“确认”框。

当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。

如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。

window.confirm("sometext");
等同于
confirm("sometext");

实例：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>JavaScript 确认框</h1>
    <button onclick="myFunction()">试一试</button>
</div>

<script>
    function myFunction() {
        var txt;
        if (confirm("Press a button!")) {
            txt = "您按了确定";
        } else {
            txt = "您按了取消";
        }
        document.getElementById("demo").innerHTML = txt;
    }
</script>
</body>

</html>

3. 提示框

如果希望用户在进入页面前输入值，通常会使用提示框。

当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。

如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。

window.prompt("sometext","defaultText");
等同于
prompt("sometext","defaultText");

实例：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <h1>JavaScript 提示框</h1>
    <button onclick="myFunction()">试一试</button>
    <p id="demo"></p>
</div>

<script>
    function myFunction() {
        var txt;
        var person = prompt("请输入您的名字：", "哈利波特");
        if (person == null || person == "") {
            txt = "用户取消输入";
        } else {
            txt = "你好，" + person + "！今天过得好吗？";
        }
        document.getElementById("demo").innerHTML = txt;
    }
</script>
</body>

</html>

1.7 JS Timing

JavaScript 可以在时间间隔内执行。

这就是所谓的定时事件（ Timing Events）。

1. Timing 事件

window 对象允许以指定的时间间隔执行代码。

这些时间间隔称为定时事件。

通过 JavaScript 使用的有两个关键的方法：

方法	描述
setTimeout(function, milliseconds)	在等待指定的毫秒数后执行函数。
setInterval(function, milliseconds)	等同于 setTimeout()，但持续重复执行该函数。

2. setTimeout() 方法

window.setTimeout(function, milliseconds);
等同于
setTimeout(function, milliseconds);

第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。

实例：单击按钮。等待 3 秒，然后页面会提示 “Hello”

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <p>点击“试一试”。等待 3 秒钟，页面将提示“Hello”。</p>
    <button onclick="setTimeout(myFunction, 3000);">试一试</button>
</div>

<script>
    function myFunction() {
        alert('Hello');
    }
</script>
</body>

</html>

3. clearTimeout() 方法

clearTimeout() 方法停止执行 setTimeout() 中规定的函数。

window.clearTimeout(timeoutVariable)
等同于
clearTimeout(timeoutVariable)

clearTimeout() 使用从 setTimeout() 返回的变量：

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

实例：类似上例，但是添加了“停止”按钮：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <p>点击“试一试”。等 3 秒。该页面将提醒“Hello”。</p>
    <p>单击“停止”以阻止第一个函数执行。</p>
    <p>（在 3 秒钟之前，您必须单击“停止”。）</p>
    <button onclick="myVar = setTimeout(myFunction, 3000)">试一试</button>
    <button onclick="clearTimeout(myVar)">停止</button>
</div>

<script>
    function myFunction() {
        alert('Hello');
    }
</script>
</body>

</html>

4. setInterval() 方法

setInterval() 方法在每个给定的时间间隔重复给定的函数。

window.setInterval(function, milliseconds);
等同于
setInterval(function, milliseconds);

第一个参数是要执行的函数。
第二个参数每个执行之间的时间间隔的长度。

实例：显示当前时间

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <p>此页面上的脚本启动这个时钟：</p>
    <p id="demo"></p>
</div>

<script>
    var myVar = setInterval(myTimer, 1000);

    function myTimer() {
        var d = new Date();
        document.getElementById("demo").innerHTML = d.toLocaleTimeString();
    }
</script>
</body>

</html>

5. clearInterval() 方法

clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。

window.clearInterval(timerVariable);
等同于
clearInterval(timerVariable);

clearInterval() 方法使用从 setInterval() 返回的变量：

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

实例：类似上例，但是我们添加了一个“停止时间”按钮

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <p>此页面上的脚本启动这个时钟：</p>
    <p id="demo"></p>
    <button onclick="clearInterval(myVar)">停止时间</button>
</div>

<script>
    var myVar = setInterval(myTimer ,1000);
    function myTimer() {
        var d = new Date();
        document.getElementById("demo").innerHTML = d.toLocaleTimeString();
    }
</script>
</body>

</html>

1.8 JS Cookies

Cookie 让您在网页中存储用户信息。

1. 什么是 cookie?

Cookie 是在计算机上存储在小的文本文件中的数据。

当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。

Cookie 是为了解决“如何记住用户信息”而发明的：

当用户访问网页时，他的名字可以存储在 cookie 中。
下次用户访问该页面时，cookie 会“记住”他的名字。

Cookie 保存在名称值对中，如：

username = Bill Gates

当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。

如果浏览器已关闭本地 cookie 支持，则以下实例均无法工作。

2. 通过 JavaScript 创建 cookie

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

通过 JavaScript，可以这样创建 cookie：

document.cookie = "username=Bill Gates";

还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：

document.cookie = "username=John Doe; expires=Wen, 08 Jan 2020 20:00:00 UTC";

通过 path 参数，可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。

document.cookie = "username=Bill Gates; expires=Wen, 08 Jan 2020 20:00:00 UTC; path=/";

3. 通过 JavaScript 读取 cookie

通过 JavaScript，可以这样读取 cookie：

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

4. 通过 javaScript 删除 cookie

删除 cookie 非常简单。

删除 cookie 时不必指定 cookie 值：

直接把 expires 参数设置为过去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

应该定义 cookie 路径以确保删除正确的 cookie。

如果你不指定路径，一些浏览器不会让你删除 cookie。

5. Cookie 字符串

document.cookie 属性看起来像一个正常的文本字符串。但它不是。

即使你向 document.cookie 写一份完整的 cookie 字符串，当再次读取时，你只能看到它的名称-值对。

如果设置了新 cookie，则旧的 cookie 不会被覆盖。新的 Cookie 会被添加到 document.cookie，所以如果你读取 document.cookie，你得到的东西会像这样：

cookie1 = value; cookie2 = value;

显示所有 cookie 创建 cookie 1 创建 cookie 2 删除 cookie 1 删除 cookie 2

如果你想找到一个指定 cookie 的值，你必须编写 JavaScript 函数来搜索 cookie 字符串中的 cookie 值。

6. JavaScript Cookie 实例

在下面的示例中，我们将创建一个 cookie 来存储访问者的名称。

访客第一次到达网页时，会要求他填写姓名。然后将该名称存储在 cookie 中。

下次访客到达同一页时，他将收到一条欢迎消息。

例如，我们将创建 3 个JavaScript函数：

设置 cookie 值的函数
获取 cookie 值的函数
检查 cookie 值的函数

6.1 设置 cookie 的函数

首先，我们创建一个函数，将访问者的名字存储在 cookie 变量中：

//cname:cookie的名字 
//cvalue：cookie的值
//exdays:cookie过期的天数
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    //通过把 cookie 名称、cookie 值和过期字符串相加，该函数就设置了 cookie。
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

6.2 获取 cookie 的函数

然后，我们创建一个函数返回指定 cookie 的值：

//cname:cookie的名字作为参数
function getCookie(cname) {
    var name = cname + "=";
    //解码 cookie 字符串
    var decodedCookie = decodeURIComponent(document.cookie);
    //用分号把 document.cookie 拆分到名为 ca（decodedCookie.split(';')）的数组中
    var ca = decodedCookie.split(';');
    //遍历 ca 数组（i = 0; i < ca.length; i++），然后读出每个值 c = ca[i]。
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
        //遍历 ca 数组（i = 0; i < ca.length; i++），然后读出每个值 c = ca[i]。
         if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    //如果未找到 cookie，则返回 ""。
    return "";
}

注：

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

6.3 检测 cookie 的函数

最后，我们创建检查 cookie 是否设置的函数。

function checkCookie() {
    var username = getCookie("username");
    //如果已设置 cookie，将显示一个问候。
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        //如果未设置 cookie，会显示一个提示框，询问用户的名字，并存储用户名 cookie 365 天，通过调用 setCookie 函数：
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

6.4 组合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function setCookie(cname,cvalue,exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays*24*60*60*1000));
            var expires = "expires=" + d.toGMTString();
            document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
        }

        function getCookie(cname) {
            var name = cname + "=";
            var decodedCookie = decodeURIComponent(document.cookie);
            var ca = decodedCookie.split(';');
            for(var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return "";
        }

        function checkCookie() {
            var user=getCookie("username");
            if (user != "") {
                alert("再次欢迎您，" + user);
            } else {
                user = prompt("请输入姓名：","");
                if (user != "" && user != null) {
                    setCookie("username", user, 30);
                }
            }
        }</script>
</head>
    
<body onload="checkCookie()"></body>
   
</html>

S_numb

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript - BOM

这篇文章参考内容分为两部分：西部开源-秦疆老师；https://www.w3school.com.cn/h.asp；文章目录BOM1.1 JS Window1.2 JS Screen1.3 JS Location1.4 JS History1.5 JS Navigator1.6 JS 弹出框1.7 JS Timing1.8 JS CookiesBOMJavaScript Wi...
复制链接

扫一扫