zoukankan html css js c++ java

JavaScript Window

一.JavaScript Window

二.JavaScript Window Screen

三.JavaScript Window Location

四.JavaScript Window History

五.JavaScript Window Navigator

六.JavaScript 弹窗

七.JavaScript 计时事件

八.JavaScript Cookies

一.JavaScript Window

JavaScript Window - 浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

Window 对象是BOM中所有对象的核心，除了是BOM中所有对象的父对象外，还包含一些窗口控制函数。

1.浏览器对象模型 (BOM)

浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

2.Window 对象

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

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

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

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

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

window.document.getElementById("header");

3.Window 子对象

Window的子对象主要有如下几个：

JavaScript document 对象
JavaScript frames 对象
JavaScript history 对象
JavaScript location 对象
JavaScript navigator 对象
JavaScript screen 对象

4.Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的窗口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

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

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

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

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

5.Window 对象属性

属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。(请参阅对象)
frames	返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
history	对 History 对象的只读引用。请参数 History 对象。
innerHeight	返回窗口的文档显示区的高度。
innerWidth	返回窗口的文档显示区的宽度。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerHeight	返回窗口的外部高度，包含工具条与滚动条。
outerWidth	返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
screen	对 Screen 对象的只读引用。请参数 Screen 对象。
screenLeft	返回相对于屏幕窗口的x坐标
screenTop	返回相对于屏幕窗口的y坐标
screenX	返回相对于屏幕窗口的x坐标
screenY	返回相对于屏幕窗口的y坐标
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的父窗口。

6.Window 对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scroll()
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

二.JavaScript Window Screen

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

这些信息可以用来了解客户端硬件的基本配置。

1.Window Screen

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

一些属性：

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

2.Window Screen 可用宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

//返回您的屏幕的可用宽度：
<script> 

document.write("可用宽度: " + screen.availWidth); 

</script>
//以上代码输出为：
可用宽度: 1920

3.Window Screen 可用高度

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

4.Screen 对象属性

属性	说明
availHeight	返回屏幕的高度（不包括Windows任务栏）
availWidth	返回屏幕的宽度（不包括Windows任务栏）
colorDepth	返回目标设备或缓冲器上的调色板的比特深度
height	返回屏幕的总高度
pixelDepth	返回屏幕的颜色分辨率（每象素的位数）
width	返回屏幕的总宽度

三.JavaScript Window Location

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

这种方法既可以用于具有onclick事件的标签，也可以用于满足某些条件进行跳转，特点是方便且灵活。

1.Window Location

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

一些实例:

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

2.Window Location Href

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

<script> 

document.write(location.href); 

</script>

以上代码输出为：

//www.w3cschool.cn/javascript/js-window-location.html

3.Window Location Pathname

location.pathname 属性返回 URL 的路径名。

//返回当前 URL 的路径名：
<script> 

document.write(location.pathname); 

</script>
//以上代码输出为：
/javascript/js-window-location.html

4.Window Location Assign

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

加载一个新的文档：
<html> 
<head> 
<script> 
function newDoc() 
  { 
  window.location.assign("http://www.w3cschool.cn") 
  } 
</script> 
</head> 
<body> 

<input type="button" value="Load new document" onclick="newDoc()"> 

</body> 
</html>

5.javascript重定向跳转

页面重定向是什么？

当你点击一个URL来访问一个网页X，但在内部你被定向到另一页Y，仅仅是因为页面重定向。这一概念是从不同于JavaScript 页面刷新。
可能有各种原因，为什么想从原来的页面重定向。下面列出的几个原因：

如果不喜欢你的域名，可以重定向到一个新的。同时，要引导所有访问者到新网站。在这种情况下，可以保持旧的域名，但放在一个页面到一个页面重定向使所有的旧域名游客可以来到新的域名。

基于浏览器的版本，或者名字不同的页面，也可以根据不同的国家，而不是用服务器端网页重定向，可以使用客户端页面重定向到登陆用户在相应的页面。

搜索引擎可能已经收录新页面。不过，在移动到另一个域名，那么不喜欢失去访客通过搜索引擎来了。所以，可以使用客户端页面的重定向。但请记住，这不应该做的，使搜索引擎傻瓜，否则，这可能让网站被取缔。

页面重新方向如何工作 ?

示例1:
这使用JavaScript在客户端页面的重定向是非常简单的。网站访问者重定向到一个新的页面，只需要添加在head部分加入一行如下：

<head>
<script type="text/javascript">
<!--
  window.location="http://www.newlocation.com";
//-->
</script>
</head>

示例 2:
可以将其重定向到一个新的页面之前显示相应的信息给网站访客。这将需要一个位时间延迟加载新页。以下是简单的例子来实现相同的：

<head>
<script type="text/javascript">
<!--
function Redirect()
{
  window.location="http://www.newlocation.com";
}
 
document.write("You will be redirected to main page in 10 sec.");
setTimeout('Redirect()', 10000);
//-->
</script>
</head>

这里的 setTimeout()是一个内置的JavaScript函数，可用于给定的时间间隔之后执行另一个函数。

示例3:
以下是例子重定向基于其浏览器不同的网页访问者：

<head>
<script type="text/javascript">
<!--
var browsername=navigator.appName; 
if( browsername == "Netscape" )
{ 
  window.location="http://www.location.com/ns.html";
}
else if ( browsername =="Microsoft Internet Explorer")
{
  window.location="http://www.location.com/ie.html";
}
else
{
 window.location="http://www.location.com/other.html";
}
//-->
</script>
</head>

常用javascript重定向跳转方法

//第一种:代码如下:
<script language="javascript"type="text/javascript"> 
window.location.href="http://shanghepinpai.com"; 
</script> 

//第二种： 代码如下:
<script language="javascript"> 
alert("返回"); 
window.history.back(-1); 
</script> 

//第三种： 代码如下:
<script language="javascript"> 
window.navigate("http://shanghepinpai.com"); 
</script> 

//第四种： 代码如下:
<script language="JavaScript"> 
self.location='http://shanghepinpai.com'; 
</script> 

//第五种： 代码如下:
<script language="javascript"> 
alert("非法访问！"); 
top.location='http://shanghepinpai.com'; 
</script>

JavaScript实现强制重定向至HTTPS页面

有时候需要把网页强制切换成HTTPS，即使用户已经访问了HTTP的版本。原因可能是你不想让用户使用HTTP来访问，因为它不安全。要做到这个很简单，如果不想用PHP或者Apache的mod_rewrite来做这件事，用Javascript也可以。代码如下：

<script type="text/javascript">
var targetProtocol = "https:";
if (window.location.protocol != targetProtocol)
 window.location.href = targetProtocol +
  window.location.href.substring(window.location.protocol.length);
</script>

四.JavaScript Window History

JavaScript Window History

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

Window History

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

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

一些方法：

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

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

这与在浏览器中点击后退按钮是相同的：
```
<html> 
<head> 
<script> 
function goBack(){ 
  window.history.back() 
 } 
</script> 
</head> 
<body> 
<input type="button" value="Back" onclick="goBack()"> 
</body> 
</html>
```
2.Window History Forward

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

这与在浏览器中点击前进按钮是相同的：
```
<html> 
<head> 
<script> 
function goForward() 
  { 
  window.history.forward() 
  } 
</script> 
</head> 
<body> 

<input type="button" value="Forward" onclick="goForward()"> 

</body> 
</html>
```
3.go(n)概述

浏览器窗口有一个history对象，用来保存浏览历史。

如果当前窗口先后访问了三个网址，那么history对象就包括三项，history.length属性等于3

go()：接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back(),history.go(0)相当于刷新当前页面。

如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是默默的失败。

4.history.pushState()

HTML5为history对象添加了两个新方法，history.pushState()和history.replaceState()，用来在浏览历史中添加和修改记录。
```
if (!!(window.history && history.pushState)){
  // 支持History API
} else {
  // 不支持
}
```
上面代码可以用来检查，当前浏览器是否支持History API。如果不支持的话，可以考虑使用Polyfill库History.js。

history.pushState方法接受三个参数，依次为：
- state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
- title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
- url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
假定当前网址是example.com/1.html，我们使用pushState方法在浏览记录（history对象）中添加一个新记录。
```
var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');
```
添加上面这个新记录后，浏览器地址栏立刻显示example.com/2.html，但并不会跳转到2.html，甚至也不会检查2.html是否存在，它只是成为浏览历史中的最新记录。这时，你在地址栏输入一个新的地址(比如访问google.com)，然后点击了倒退按钮，页面的 URL 将显示2.html；你再点击一次倒退按钮，URL 将显示1.html。

总之，pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应。

如果pushState的url参数，设置了一个新的锚点值（即hash），并不会触发hashchange事件。如果设置了一个跨域网址，则会报错。
```
// 报错
history.pushState(null, null, 'https://twitter.com/hello');
```
5.history.replaceState()

history.replaceState方法的参数与pushState方法一模一样，区别是它修改浏览历史中当前纪录。

假定当前网页是example.com/example.html。
```
history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');

history.back()
// url显示为http://example.com/example.html?page=1

history.back()
// url显示为http://example.com/example.html

history.go(2)
// url显示为http://example.com/example.html?page=3
```
6.history.state属性

history.state属性返回当前页面的state对象。
```
history.pushState({page: 1}, 'title 1', '?page=1');

history.state
// { page: 1 }
```
popstate事件

每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。

需要注意的是，仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。

使用的时候，可以为popstate事件指定回调函数。这个回调函数的参数是一个event事件对象，它的state属性指向pushState和replaceState方法为当前URL所提供的状态对象（即这两个方法的第一个参数）。
```
window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};

// 或者

window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
});
```
上面代码中的event.state，就是通过pushState和replaceState方法，为当前URL绑定的state对象。

这个state对象也可以直接通过history对象读取。
```
var currentState = history.state;
```
注意，页面第一次加载的时候，在load事件发生后，Chrome和Safari浏览器（Webkit核心）会触发popstate事件，而Firefox和IE浏览器不会。

7.URLSearchParams API

URLSearchParams API用于处理URL之中的查询字符串，即问号之后的部分。没有部署这个API的浏览器，可以用url-search-params这个垫片库。
```
var paramsString = 'q=URLUtils.searchParams&topic=api';
var searchParams = new URLSearchParams(paramsString);
```
URLSearchParams有以下方法，用来操作某个参数。
- has()：返回一个布尔值，表示是否具有某个参数
- get()：返回指定参数的第一个值
- getAll()：返回一个数组，成员是指定参数的所有值
- set()：设置指定参数
- delete()：删除指定参数
- append()：在查询字符串之中，追加一个键值对
- toString()：返回整个查询字符串
```
var paramsString = 'q=URLUtils.searchParams&topic=api';
var searchParams = new URLSearchParams(paramsString);

searchParams.has('topic') // true
searchParams.get('topic') // "api"
searchParams.getAll('topic') // ["api"]

searchParams.get('foo') // null，注意Firefox返回空字符串
searchParams.set('foo', 2);
searchParams.get('foo') // 2

searchParams.append('topic', 'webdev');
searchParams.toString() // "q=URLUtils.searchParams&topic=api&foo=2&topic=webdev"

searchParams.append('foo', 3);
searchParams.getAll('foo') // [2, 3]

searchParams.delete('topic');
searchParams.toString() // "q=URLUtils.searchParams&foo=2&foo=3"
```
  URLSearchParams还有三个方法，用来遍历所有参数。
  - keys()：遍历所有参数名
  - values()：遍历所有参数值
  - entries()：遍历所有参数的键值对
  上面三个方法返回的都是Iterator对象。
```
var searchParams = new URLSearchParams('key1=value1&key2=value2');

for (var key of searchParams.keys()) {
  console.log(key);
}
// key1
// key2

for (var value of searchParams.values()) {
  console.log(value);
}
// value1
// value2

for (var pair of searchParams.entries()) {
  console.log(pair[0]+ ', '+ pair[1]);
}
// key1, value1
// key2, value2
```
  在Chrome浏览器之中，URLSearchParams实例本身就是Iterator对象，与entries方法返回值相同。所以，可以写成下面的样子。
```
for (var p of searchParams) {
  console.log(p);
}
```
  下面是一个替换当前URL的例子。
```
// URL: https://example.com?version=1.0
var params = new URLSearchParams(location.search.slice(1));
params.set('version', 2.0);

window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?version=2.0
```
  URLSearchParams实例可以当作POST数据发送，所有数据都会URL编码。
```
let params = new URLSearchParams();
params.append('api_key', '1234567890');

fetch('https://example.com/api', {
  method: 'POST',
  body: params
}).then(...)
```
```
//DOM的a元素节点的searchParams属性，就是一个URLSearchParams实例。
var a = document.createElement('a');
a.href = 'https://example.com?filter=api';
a.searchParams.get('filter') // "api"


//URLSearchParams还可以与URL接口结合使用。
var url = new URL(location);
var foo = url.searchParams.get('foo') || 'somedefault';
```
  五.JavaScript Window Navigator
- window.navigator 对象包含有关访问者浏览器的信息。
  
  Window Navigator
  
  window.navigator 对象在编写时可不使用 window 这个前缀。
```
<div id="example"></div> 

<script> 

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; 
txt+= "<p>Browser Name: " + navigator.appName + "</p>"; 
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>"; 
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; 
txt+= "<p>Platform: " + navigator.platform + "</p>"; 
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>"; 
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>"; 

document.getElementById("example").innerHTML=txt; 

</script>
```
  警告!!!
  
  来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
  - navigator 数据可被浏览器使用者更改
  - 一些浏览器对测试站点会识别错误
  - 浏览器无法报告晚于浏览器发布的新操作系统
  浏览器检测
  
  由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。
  
  由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。
  
  例子：if (window.opera) {...some action...}
  
  相关阅读
  
  请查看我们的 JavaScript Navigator 对象的参考手册，其中提供了Navigator对象的所有的属性和方法。
  
  这个手册包含的关于每个属性和方法的用法的详细描述和实例。
- 六.JavaScript 弹窗
- JavaScript 弹窗
  
  可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
  
  1.警告框
  
  警告框经常用于确保用户可以得到某些信息。
  
  当警告框出现后，用户需要点击确定按钮才能继续进行操作。
```
window.alert("sometext");
```
  window.alert() 方法可以不带上window对象，直接使用alert()方法。

2.确认框

确认框通常用于验证是否接受用户操作。

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

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

window.confirm("sometext");

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

3.提示框

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

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

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

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

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

4.换行

弹窗使用反斜杠 + "n"( ) 来设置换行。

alert("Hello
How are you?");

七.JavaScript 计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码

Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

setInterval() 方法

setInterval() 间隔指定的毫秒数不停地执行指定的代码

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用window前缀，直接使用函数setInterval()。

setInterval() 第一个参数是函数（function）。

第二个参数间隔的毫秒数

注意: 1000 毫秒是一秒。

//每三秒弹出 "hello" ：
setInterval(function(){alert("Hello")},3000);

实例展示了如何使用 setInterval() 方法，但是每三秒弹出一次对用户体验并不好。

以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码，就是和手表一样。

var myVar=setInterval(function(){myTimer()},1000); 

function myTimer() 
{ 
var d=new Date(); 
var t=d.toLocaleTimeString(); 
document.getElementById("demo").innerHTML=t; 
}

如何停止执行?

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：

<p id="demo"></p> 
<button onclick="myStopFunction()">Stop time</button> 

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

setTimeout() 方法

window.setTimeout("javascript 函数",毫秒数);

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如"alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示：1000 毫秒等于一秒。

//等待3秒，然后弹出 "Hello":
setTimeout(function(){alert("Hello")},3000);

如何停止执行?

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

语法

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不使用window 前缀。

要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量:

myVar=setTimeout("javascript function",milliseconds);

如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。

//以下是同一个实例, 但是添加了 "Stop the alert" 按钮:

var myVar; 

function myFunction() 
{ 
myVar=setTimeout(function(){alert("Hello")},3000); 
} 

function myStopFunction() 
{ 
clearTimeout(myVar); 
}

八.JavaScript Cookies

Cookies 用于存储 web 页面的用户信息。

由于 JavaScript 是运行在客户端的脚本，所以可以使用JavaScript来设置运行在客户端的Cookies。

什么是 Cookies？

Cookies 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookies 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Cookies 以名/值对形式存储，如下所示:

username=John Doe

当浏览器从服务器上请求 web 页面时，属于该页面的 cookies 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

使用 JavaScript 创建Cookie

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

JavaScript 中，创建 cookie 如下所示：

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

使用 JavaScript 读取 Cookie

在 JavaScript 中, 可以使用以下代码来读取 cookies：

var x = document.cookie;

document.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value

使用 JavaScript 修改 Cookie

在 JavaScript 中，修改 cookies 类似于创建 cookies，如下所示：

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

使用 JavaScript 删除 Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，当您删除时不必指定 cookie 的值。

Cookie 字符串

document.cookie 属性看起来像一个普通的文本字符串，其实它不是。

即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。

如果您设置了新的 cookie，旧的 cookie 不会被覆盖。新 cookie 将添加到 document.cookie 中，所以如果您重新读取document.cookie，您将获得如下所示的数据：

cookie1=value; cookie2=value;

如果您需要查找一个指定 cookie 值，您必须创建一个JavaScript 函数在 cookie 字符串中查找 cookie 值。

JavaScript Cookie 实例

在以下实例中，我们将创建 cookie 来存储访问者名称。

首先，访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。

访问者下一次访问页面时，他会看到一个欢迎的消息。

在这个实例中我们会创建 3 个 JavaScript 函数:

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

https://www.w3cschool.cn/javascript/js-cookies.html

查看全文

相关阅读:
Web开发——HTML基础（文件和网站结构）
Web开发——HTML基础（高级文本格式列表/style）
Web开发——HTML基础
 Web开发——CSS基础
 Java 输入/输出——处理流（RandomAccessFile）
Java 输入/输出——处理流（ObjectIO）
Java 输入/输出——处理流（DataInputStream/DataOutputStream、ByteArrayInputStream/ByteArrayOutputStream）
关于R.layout中找不到已存在的布局文件问题
 RelativeLayout常用属性整理
 配置adb环境变量

原文地址：https://www.cnblogs.com/lukelook/p/9663278.html

JavaScript Window

一.JavaScript Window

JavaScript Window - 浏览器对象模型

1.浏览器对象模型 (BOM)

2.Window 对象

3.Window 子对象

4.Window 尺寸

5.Window 对象属性

6.Window 对象方法

二.JavaScript Window Screen

1.Window Screen

2.Window Screen 可用宽度

3.Window Screen 可用高度

4.Screen 对象属性

三.JavaScript Window Location

1.Window Location

2.Window Location Href

3.Window Location Pathname

4.Window Location Assign

5.javascript重定向跳转

四.JavaScript Window History

JavaScript Window History

Window History

1.Window History Back

2.Window History Forward

3.go(n)概述

4.history.pushState()

5.history.replaceState()

6.history.state属性

popstate事件

7.URLSearchParams API

五.JavaScript Window Navigator

Window Navigator

警告!!!

浏览器检测

相关阅读

JavaScript 弹窗

1.警告框

2.确认框

3.提示框

4.换行

七.JavaScript 计时事件

如何停止执行?

setTimeout() 方法

如何停止执行?

语法

window.clearTimeout() 方法可以不使用window 前缀。

八.JavaScript Cookies

什么是 Cookies？

使用 JavaScript 创建Cookie

使用 JavaScript 读取 Cookie

使用 JavaScript 修改 Cookie

使用 JavaScript 删除 Cookie

Cookie 字符串

JavaScript Cookie 实例