JS_07_Window_弹窗_计时器_Cookie

最新推荐文章于 2025-04-02 14:58:16 发布

原创最新推荐文章于 2025-04-02 14:58:16 发布 · 631 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS #JavaScript #Window #计时器 #Cookie

JS/ES6 专栏收录该内容

19 篇文章

订阅专栏

JavaScript Window 对象

Window 对象表示浏览器中　打开的窗口。

Window 对象描述

Window 对象表示一个　浏览器窗口　或　一个 框架frame。

在客户端 JavaScript 中，

Window 对象是 全局对象，所有的表达式都在当前的环境中计算。

Window 子对象

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

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

Window 对象

Window 对象表示浏览器中 打开的窗口。

如果文档包含框架（<frame> 或 <iframe> 标签），

浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

注意：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

JavaScript Window对象学习脑图

JavaScript Window - 浏览器Brower 对象Object 模型Model

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

Window 对象是BOM中所有对象的核心，

不仅是BOM中所有对象的 父对象，而且还包含一些 窗口控制函数。

浏览器对象模型 (BOM)

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

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，

因此常被认为是 BOM 的方法和属性。

Window 对象

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

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

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

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

我们熟知的 HTML DOM 的 document 也是 window 对象的属性之一：

 window.document.getElementById("id_p_result"); 

与此相同：

 document.getElementById("id_p_result");  

Window 子对象

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

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

Window 尺寸

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

对于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;

该例显示浏览器窗口的高度和宽度：（不包括工具栏/滚动条）

完整代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
        div {
            background-color: rgba(13,109,108,0.5);
            color: white;
            padding: 20px;
            border:1px solid;
        }

    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
</head>  
  
<body onload="displayTime()">  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        
        <p id="id_p_result">窗口宽高:</p>
        <script type="text/javascript">
            var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            var pNode = document.getElementById('id_p_result');
            pNode.innerHTML = "窗口宽高: " + screenWidth + " X " + screenHeight;
        </script>
        
        <p class="sgcontentcolor sgcenter" style="clear:left;">
            <b>注意:</b>
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

其他 Window 方法

一些其他方法：

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

window.open()方法定义和用法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

语法

window.open(URL,name,specs,replace)

参数

说明

URL

可选。打开指定的页面的URL。如果没有指定URL，打开与新的空白窗口

name

可选。指定target属性或窗口的名称。支持以下值：

_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
name - 窗口名称

specs

可选。一个逗号分隔的项目列表。支持以下值：

channelmode=yes\|no\|1\|0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes\|no\|1\|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes\|no\|1\|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels	窗口的高度。最小.值为100
left=pixels	该窗口的左侧位置
location=yes\|no\|1\|0	是否显示地址字段.默认值是yes
menubar=yes\|no\|1\|0	是否显示菜单栏.默认值是yes
resizable=yes\|no\|1\|0	是否可调整窗口大小.默认值是yes
scrollbars=yes\|no\|1\|0	是否显示滚动条.默认值是yes
status=yes\|no\|1\|0	是否要添加一个状态栏.默认值是yes
titlebar=yes\|no\|1\|0	是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes\|no\|1\|0	是否显示浏览器工具栏.默认值是yes
top=pixels	窗口顶部的位置.仅限IE浏览器
width=pixels	窗口的宽度.最小.值为100

replace

Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。

打开,移动,缩放,关闭新窗口的代码:

        <script type="text/javascript">
            var subWindow = null;
            // 打开子窗口
            function openBtnClicked () {
                // 默认在_blank新窗口中打开
                // window.open("http://baidu.com");
                subWindow = window.open('','','width=300,height=300');
                subWindow.document.write("<h1>未闻花名</h1>");
                // 写不写有区别吗?
                subWindow.focus();
            }
            // 移动刚才打开的子窗口
            function moveBtnClicked () {
                // x,y 距离左上角为 50
                subWindow.moveTo(50,50);
            }
            // 缩放刚才打开的子窗口
            function resizeBtnClicked () {
                // width,height放大到200
                subWindow.resizeTo(200,200);
            }
            // 关闭刚才打开的子窗口
            function closeBtnClicked () {
                subWindow.close();
            }
        </script>
        <button onclick="openBtnClicked()" class="class_btn class_btn_green" type="button" >打开子窗口</button>
        <button onclick="moveBtnClicked()" class="class_btn class_btn_green" type="button" >移动子窗口</button>
        <button onclick="resizeBtnClicked()" class="class_btn class_btn_green" type="button" >缩放子窗口</button>
        <button onclick="closeBtnClicked()" class="class_btn class_btn_green" type="button" >关闭子窗口</button>

JavaScript Window Screen

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

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

Window Screen

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

一些属性：

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

Window Screen 可用宽度

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

实例

返回您的屏幕的可用宽度：

<script> 

document.write("Available Width: " + screen.availWidth); 

</script>

以上代码输出为：

Available Width: 320 (iPhone 5S上测试)

在mac pro上测试:

整个屏幕截图尺寸是2880×1800 (即1440个点×900个点),

除去右侧的docker的宽(36个点),

再除去顶部菜单文本栏的高(23个点)之后,

剩下的整个屏幕截图为2808×1800(即1404个点×877个点)

Window Screen 可用高度

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

实例

返回您的屏幕的可用高度：

<script> 

document.write("Available Height: " + screen.availHeight); 

</script>

以上代码将输出：

Available Height: 568 (iPhone 5S 上测试)

Screen 对象

Screen 对象包含有关客户端显示屏幕的信息。

注意：虽然没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象。

Screen 对象属性

属性	说明
availHeight	返回屏幕的可用高度（不包括Windows任务栏）(mac为不包含顶部菜单条23个点; iPhone 5s为568)
availWidth	返回屏幕的可用宽度（不包括Windows任务栏）(mac为不包含右边dock36个点;iPhone 5s为320)
colorDepth	返回目标设备或缓冲器上的调色板的比特深度 (mac为24; iPhone 5s为32)
height	返回屏幕的总高度 (mac为900; iPhone 5s为 568)
pixelDepth	返回屏幕的颜色分辨率（每象素的位数）(mac为24; iPhone 5s为32)
width	返回屏幕的总宽度 (mac为1440; iPhone 5s为320)

JavaScript Window Location

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

这种方法既可以用于具有onclick事件的标签，

也可以用于满足某些条件后进行跳转，特点是方便且灵活。

例如根据域名,跳转到不同的html文件

Window Location

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

一些例子:

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

Window Location Href

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

实例

返回（当前页面的）整个 URL：

<script> 

document.write(location.href); 

</script>

以上代码输出为：

//www.baidu.com/javascript/js-window-location.html

Window Location Pathname

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

实例

返回当前 URL 的路径名：

<script> 

document.write(location.pathname); 

</script>

以上代码输出为：

/javascript/js-window-location.html

Window Location Assign

location.assign() 方法加载新的文档。页面重定向

实例

加载一个新的文档：

<html> 
<head> 
<script> 
function newDoc() 
  {    // 页面重定向
  window.location.assign("http://www.baidu.com") 
  } 
</script> 
</head> 
<body> 

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

</body> 
</html>

JavaScript Window History

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

Window History

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

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

一些方法：

history.back() - 与在浏览器点击后退按钮相同,等价于history.go(-1);
history.forward() - 与在浏览器中点击向前按钮向前相同,等价于history.go(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>

Window History Forward

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

定义和用法

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

调用该方法的效果等价于点击前进按钮或调用 history.go(1)。

这与在浏览器中点击前进按钮是相同的：

实例

在页面上创建一个向前的按钮：

<html> 
<head> 
<script> 
function goForward() 
  { 
  window.history.forward() 
  } 
</script> 
</head> 
<body> 

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

</body> 
</html>

JavaScript Window Navigator

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

Window Navigator

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

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
        div {
            background-color: rgba(13,109,108,0.5);
            color: white;
            padding: 20px;
            border:1px solid;
        }

    </style>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p id="id_p_result"></p>
        <script type="text/javascript">
            var pResultNode = document.getElementById('id_p_result');
            pResultNode.innerHTML = "appCodeName: " + navigator.appCodeName + "<br/>" + 
                "appName: " + navigator.appName + "<br/>" + 
                "appVersion: " + navigator.appVersion + "<br/>" + 
                "cookieEnabled: " + navigator.cookieEnabled + "<br/>" + 
                "platform: " + navigator.platform + "<br/>" + 
                "userAgent: " + navigator.userAgent + "<br/>" + 
                "systemLanguage: " + navigator.systemLanguage;

        </script>
        
        <p>
            <b>注意:</b>window.navigator对象可以伪装
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

警告!!!

来自 navigator 对象的信息具有误导性，不应该被用于 检测浏览器版本，

这是因为：

navigator 数据可被一些SB浏览器使用者篡改
一些浏览器对 测试站点 会识别错误
浏览器无法报告晚于浏览器发布的新操作系统

浏览器检测

由于 navigator 可误导浏览器检测，

因此,我们推荐使用 对象检测 可用来嗅探不同的浏览器。

由于不同的浏览器支持不同的对象，

您可以使用对象来检测浏览器。???Excuse Me???

Navigator 对象

Navigator 对象包含有关浏览器的信息。

注意：没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。

Navigator 对象属性

属性	说明
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent 头部的值

Navigator 对象方法

方法	描述
javaEnabled()	指定是否在浏览器中启用Java (false)
taintEnabled()	规定浏览器是否启用数据污点(data tainting) 只有IE运行,不知道有啥用

JavaScript 弹窗

可以在 JavaScript 中创建三种消息框：

1.警告框、

2.确认框、

3.提示框。

警告框

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

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

语法

window.alert("未闻花名");

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

实例

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function myFunction() 
{ 
alert("未闻花名"); 
} 
</script> 
</head> 
<body> 

<input type="button" onclick="myFunction()" value="显示警告框"> 

</body> 
</html>

确认取消对话框

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

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

语法

window.confirm("sometext");

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

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
        div {
            background-color: rgba(13,109,108,0.5);
            color: white;
            padding: 20px;
            border:1px solid;
        }

    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p style="line-height:160%;" id="id_p_result"></p>
        <script type="text/javascript">
            var pResultNode = document.getElementById('id_p_result');
            function btnClicked() {
                var isNotLoli = confirm("下面内容只有年满14周岁才能观看");
                if(isNotLoli == false){
                    // 
                }else{
                    // 
                    pResultNode.innerHTML = "唯有自爱之人,方能得到爱情";
                }
            }
            pResultNode.innerHTML = str;

        </script>
        <button onclick="btnClicked()" class="class_btn class_btn_green" type="button" >渴望爱情</button>
        <p class="sgcenter">
            <b>注意:</b>window.confirm()确定取消对话框
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

核心代码:

var r=confirm("按下按钮"); 
if (r==true) 
  { 
    x="你按下了\"确定\"按钮!"; 
  } 
else 
  { 
    x="你按下了\"取消\"按钮!"; 
  }

提示框

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

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

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

语法

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

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

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
        div {
            background-color: rgba(13,109,108,0.5);
            color: white;
            padding: 20px;
            border:1px solid;
        }

    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p style="line-height:160%;" id="id_p_result"></p>
        <script type="text/javascript">
            function btnClicked() {
                var pResultNode = document.getElementById('id_p_result');
                var girlType = prompt("请输入你想邂逅的女孩类型","萝莉");
                if(girlType != null && girlType.trim() != ""){
                    pResultNode.innerHTML = "系统挑选出了67个" + girlType + "类型的妹子";
                }else{
                    pResultNode.innerHTML = "";
                }
            }
        </script>
        <button onclick="btnClicked()" class="class_btn class_btn_green" type="button" >邂逅爱情</button>
        <p class="sgcenter">
            <b>注意:</b>window.prompt()输入框
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

核心代码:

var person=prompt("请输入你的名字","beyond"); 
if (person!=null && person!="") 
  { 
  x="你好 " + person + "！今天感觉如何？"; 
  }

提示：在本站中你可以获得有关 Window prompt() 方法的更多知识！

换行

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

实例

alert("Hello \n beyond"); 

JavaScript 计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间 间隔之后 来执行代码，

而不是在函数被调用后立即执行。我们称之为 计时事件。

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

setInterval() - 以指定间隔的毫秒数, 不停地重复执行指定的代码。
setTimeout() - 延时指定的毫秒数后执行指定的代码

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

setInterval("functionName",milliseconds) 方法

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

语法

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

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

setInterval() 第1个参数是匿名函数（function）。

第2个参数间隔的毫秒数

注意: 1000 毫秒是一秒。

实例

每三秒弹出 "hello" ：

setInterval(function(){alert("Hello")},3000);

上面实例展示了如何使用 setInterval() 方法，

但是每三秒弹出一次对用户体验并不好。以下实例将显示当前时间。

setInterval() 方法设置每秒钟执行一次代码，就是和手表一样。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
        div {
            background-color: rgba(13,109,108,0.5);
            color: white;
            padding: 20px;
            border:1px solid;
        }
    </style>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p class="sgcenter" id="id_p_result"></p>
        <script type="text/javascript">
            // 参数1 是一个函数(或匿名函数)
            var timer = setInterval(showTime,1000);
            
            var pNode = document.getElementById('id_p_result');
            // 定义函数
            function showTime() {
                var today = new Date();
                pNode.innerHTML = today.toLocaleTimeString();
            }
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>window.setInterval(函数,毫秒数);
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

核心代码:

显示当前时间

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() 方法, 在创建计时方法时,你必须使用全局变量记住：

timer = setInterval("javascript function",milliseconds);

然后你可以使用clearInterval() 方法来停止执行。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
        div {
            background-color: rgba(13,109,108,0.5);
            color: white;
            padding: 20px;
            border:1px solid;
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p class="sgcenter" id="id_p_result">0</p>
        <script type="text/javascript">
            var timer = null;
            var i = 0;
            var pNode = document.getElementById('id_p_result');
            // 开始计时
            function startBtnClicked() {
                i = 0;
                // 参数1 是一个函数(或匿名函数)
                timer = setInterval(showTime,1);
            }
            // 停止计时
            function stopBtnClicked() {
                window.clearInterval(timer);
                timer = null;
                pNode.innerHTML = i + '';
            }
            // 定义计时函数
            function showTime() {
                pNode.innerHTML = i + '';
                if (i < 300) { 
                    i++;
                } else {
                    // 567三者之一随机出现
                    i = i + (Math.floor(Math.random()*3)+5);
                }
                i++;
            }
        </script>
        <button onclick="startBtnClicked()" class="class_btn class_btn_green" type="button" >开始计时</button>
        <button onclick="stopBtnClicked()" class="class_btn class_btn_green" type="button" >停止计时</button>
        <p class="sgcenter">
            <b>注意:</b>window.setInterval(函数,毫秒数);
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

核心代码:

以下例子,我们添加了 "Stop time" 按钮：

<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() 方法会返回句柄值。

在上面的语句中，值被储存在名为 timer 的变量中。

假如你希望取消这个 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）使用全局变量记住句柄:

timer = 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 以名/值对形式存储，如下所示:

girlname=面码

当浏览器从服务器上请求 web 页面时，

属于该页面的 cookies 会被添加到该请求中。

服务端通过这种方式来获取用户的信息。

使用 JavaScript 创建Cookie

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

JavaScript 中，创建 cookie 如下所示：

document.cookie="girlname=面码";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间)

或者,在当前时间上面进行增加:

            // 设置cookie
            function setCookie(cookieName,cookieValue,expireDay) {
                var today = new Date();
                today.setTime(today.getTime() + (expireDay*24*3600*1000));
                document.cookie = cookieName + "=" + cookieValue + ";expires=" + today.toGMTString();
            }

例如: Sun, 01 Apr 2018 08:41:24 GMT

默认情况下，cookie 在浏览器关闭时就被删除了：

document.cookie = "girlname=面码; expires=Thu, 18 Dec 2006 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。

默认情况下，cookie 属于当前页面。

document.cookie = "girlname=面码; expires=Thu, 18 Dec 2006 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 = "girlName=面码; expires=Thu, 18 Dec 2006 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

使用 JavaScript 删除 Cookie

删除 cookie 非常简单。

您只需要设置 expires 参数为从前的时间即可，

如下所示，设置为 Thu, 07 June 2003 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 07 June 2003 00:00:00 GMT";

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

Cookie 字符串

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

即使您在 document.cookie 中写入一个完整的 cookie 字符串,

当您重新读取该 cookie 信息时，cookie 信息是以key=value键值对的形式展示的。

如果您添加新的不重名的 cookie键值对，原来的那些 cookie键值对并不会被覆盖。

新的不重名的 cookie 键值对将添加到 document.cookie 中，

所以如果您重新读取document.cookie，您将获得如下所示的数据：

key1=value1; key2=value2;

如果您需要查找一个指定 cookie 值，

您必须创建一个JavaScript 函数在 cookie 字符串中查找 key 值。

JavaScript Cookie 实例

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

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

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

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

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

设置 cookie 值的函数

首先，我们创建一个函数用于存储访问者的名字：

function setCookie(key,value,expiredays)        
{        
var today = new Date();        
today.setTime(today.getTime()+(expiredays*24*60*60*1000));        
var expires = "expires="+today.toGMTString();        
document.cookie = key + "=" + value + "; " + expires;        
}

函数解析：

以上的函数参数中，cookie 的名称为 key，cookie 的值为 value，并设置了 cookie 的过期时间 expires。

该函数设置了 cookie 名、cookie 值、cookie过期时间。

获取 cookie 值的函数

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

function getCookieValue(key)        
{        
var keyfix = key + "=";        
var pairArr = document.cookie.split(';');        
for(var i=0; i<pairArr.length; i++)        
  {        
  var keyvalue = pairArr[i].trim();        
  if (keyvalue.indexOf(key)==0) return keyvalue.substring(keyfix.length,keyvalue.length);        
  }        
return "";        
}

函数解析： key1=value1; key2=value2;

cookie 名的参数为 key。

创建一个文本变量用于检索指定 cookie : key = key + "="。

使用分号来分割 document.cookie 字符串，

并将分割后的字符串数组赋值给 pairArr (pairArr = document.cookie.split(';'))。

循环 pairArr 数组 (i=0;i<pairArr.length;i++)，

然后读取数组中的每个值，并去除前后空格 (keyvalue=pairArr[i].trim())。

如果找到 cookie(keyvalue.indexOf(key) == 0)，

返回 cookie 的值 (keyvalue.substring(key.length,keyvalue.length)。

如果没有找到 cookie, 返回 ""。

检测 cookie 值的函数

最后，我们可以创建一个检测 cookie 的键值对是否已经被创建的函数。

如果设置了 cookie，将显示一个问候信息。

如果没有设置 cookie，将会显示一个弹窗用于询问访问者的名字，

并调用 setCookie 函数将访问者的名字存储 365 天：

function checkCookie()        
{        
var username = getCookie("username");        
if (username != "")        
  {        
  alert("Welcome again " + username);        
  }        
else        
  {        
  username = prompt("Please enter your name:","");        
  if (username != "" && username!=null)        
    {        
    setCookie("username",username,365);        
    }        
  }        
}

完整实例

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
        
        /*最外层,只用于居中的容器*/
        div.class_div_container {
            /*background: green;*/
            margin: 0 auto;
            width: 400px;
            height: 150px;
        }
        div.class_div_flexcontainer {  
            width: 100%;  
            height: 100%;  
            color:white;  
            /*background-color:#4CAF50;  */
            /*核心代码  
            默认它的所有子元素会一行排列  
            标准的写最后面*/  
            display: -webkit-flex;  
            display: flex;  
            /*核心代码:在弹性容器内的最左上方开始,从上往下依次排列子元素*/  
            /*-webkit-flex-direction:column;  
            flex-direction:column;  */
            /*最左边挨着,最右边挨着,中间等间距*/  
            -webkit-justify-content:space-between;  
            justify-content:space-between; 
            /*会换行,且每一行将平分容器的高度,且溢出的那部分内容在上方*/  
            -webkit-flex-wrap:wrap;  
            flex-wrap:wrap;
             /*align-content:center;<br/>  
        该属性只针对于wrap的多行的x轴线们 在 垂直方向上的均布*/  
        -webkit-align-content:space-between;  
        align-content:space-between;  
        }  
        div.class_div_flexitem {  
            /*background-color: blue;  */
            width: 50%;  
            /*height: 50%;  */
            /*如果没有高度会自动填满*/  
            height: 50%;
            margin: 0;  
            padding: 0;
            /*里面的按钮居中*/
            text-align: center;
            vertical-align: center;
            
        }
        button {
            height: 90%;
        }
        
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
</head>  
  
<body onload="bodyOnLoad()">  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p class="sgcenter" id="id_p_result"> </p>
        <script type="text/javascript">
            var pNode = document.getElementById('id_p_result');
            // 一进入网站,就欢迎 or 填写网名
            function bodyOnLoad() {
                // 先检查key=value是否已经存在
                var girlName = queryCookie("girlName");
                if(girlName != ""){
                    pNode.innerHTML = girlName + ",妳终于回家了!";
                }else{
                    // 如果没有,代表第1次登录
                    girlName = prompt("妳的芳名: ","mathilda");
                    if(girlName != "" && girlName != null){
                        // 如果输入有效,存入cookie
                        girlName = girlName.trim();
                        var isSuccess = setCookie("girlName",girlName,365);
                        pNode.innerHTML = "创建cookie: " + isSuccess;
                    }
                }

            }
            // 设置cookie
            function setCookie(cookieName,cookieValue,expireDay) {
                var today = new Date();
                // cookieValue = encodeURIComponent(cookieValue);
                today.setTime(today.getTime() + (expireDay*24*3600*1000));
                document.cookie = cookieName + "=" + cookieValue + ";expires=" + today.toGMTString();
            }

            // 查询cookie
            function queryCookie(key) {
                if (key == "" || key == null) {return "";};
                var keyFix = key + '=';
                // 用分号分隔成数组 
                var keyValueArr = document.cookie.split(";");
                // 遍历,查找
                for(var i = 0; i < keyValueArr.length;i++){
                    var keyValue = keyValueArr[i].trim();
                    // girlName=面码 
                    if(keyValue.indexOf(keyFix) == 0){
                        // startIndex,endIndex(可省)
                        return keyValue.substring(keyFix.length,keyValue.length);
                    }else{
                        return "";
                    }
                }
            }
            
            // 设置cookie
            function setCookieBtnClicked() {
                // 1 天后过期
                var isSuccess = setCookie("girlName","面码",1);
                pNode.innerHTML = "创建cookie: " + isSuccess;
            }
            // 读取cookie
            function readCookieBtnClicked() {
                NSLog(typeof(document.cookie));
                pNode.innerHTML = "读取cookie: " + document.cookie;
            }
            // 更新cookie
            function updateCookieBtnClicked() {
                var isSuccess = setCookie("girlName","维包子",2);
                pNode.innerHTML = "修改cookie: " + isSuccess;
            }
            // 删除cookie
            function deleteCookieBtnClicked() {
                var isSuccess = setCookie("girlName","维包子",-1);
                pNode.innerHTML = "删除cookie: " + isSuccess;
            }
        </script>
        <div class="class_div_container">
            <div class="class_div_flexcontainer"> 
                <div class="class_div_flexitem">
                    <button onclick="setCookieBtnClicked()" class="class_btn class_btn_green" type="button" >设置cookie</button>
                </div>  
                <div class="class_div_flexitem">
                    <button onclick="readCookieBtnClicked()" class="class_btn class_btn_green" type="button" >读取cookie</button>
                </div>  
                <div class="class_div_flexitem">
                    <button onclick="updateCookieBtnClicked()" class="class_btn class_btn_green" type="button" >修改cookie</button>
                </div>  
                <div class="class_div_flexitem">
                    <button onclick="deleteCookieBtnClicked()" class="class_btn class_btn_green" type="button" >删除cookie</button>
                </div>  
            </div> 
        </div>
        
        <p class="sgcenter">
            <b>注意:</b>cookie必须在服务器环境下使用!
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

核心代码:

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; 
} 

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

function checkCookie() 
{ 
var user=getCookie("username"); 
if (user!="") 
  { 
  alert("Welcome again " + user); 
  } 
else 
  { 
  user = prompt("Please enter your name:",""); 
  if (user!="" && user!=null) 
    { 
    setCookie("username",user,365); 
    } 
  } 
}

以下实例在页面载入时执行 checkCookie() 函数。

补充:

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	返回最顶层的父窗口。

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()	在指定的毫秒数后调用函数或计算表达式。