2019独角兽企业重金招聘Python工程师标准>>>

一、 window对象简介

window 对象是 BOM（浏览器对象模型）的核心，window对象指当前的浏览器窗口。

window对象方法:

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框
prompt()	显示可提示用户输入的对话框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
open()	打开一个新的浏览器窗口或查找一个已命名的窗口
close()	关闭浏览器窗口
print()	打印当前窗口的内容
focus()	把键盘焦点给予一个窗口
blur()	把键盘焦点从顶层窗口移开
moveBy()	相对窗口的当前坐标移动指定的像素
moveTo()	把窗口的左上角移动到一个指定的坐标
resizeBy()	按照指定的像素调整窗口的大小
resizeTo()	把窗口的大小调整到指定的宽度和高度
scrollBy()	按照指定的像素值来滚动内容
scrollTo()	把内容滚动到指定的坐标
setInterval()	每隔指定的时间执行代码
setTimeout()	在指定的延迟时间之后来执行代码
clearInterval()	取消 setInterval() 设置
clearTimeout()	取消 setTimeout() 设置

二、对话框方法

2.1、警告（alert 消息对话框）

我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。
如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。

语法:

alert(字符串或变量);

看下面的代码:

<script type="text/javascript">var mynum = 30;alert("hello!");alert(mynum);
</script>

注: alert弹出消息对话框(包含一个确定按钮)。

**结果：**按顺序弹出消息框

注意:

在点击对话框 "确定" 按钮前，不能进行任何其它操作。
消息对话框通常可以用于调试程序。
alert 输出内容，可以是字符串或变量，与 document.write相似。

2.2、确认（confirm 消息对话框）

confirm 消息对话框 通常用于允许用户做选择的动作，如：“你对吗？”等。
弹出对话框(包括一个确定按钮和一个取消按钮)。

语法:

confirm(str);

参数说明:

str：在消息对话框中要显示的文本
返回值: Boolean值

返回值:

当用户点击"确定"按钮时，返回 true
当用户点击"取消"按钮时，返回 false

注: 通过返回值可以判断用户点击了什么按钮

看下面的代码:

<script type="text/javascript">var mymessage=confirm("你喜欢JavaScript吗?");if(mymessage==true){   document.write("很好,加油!");   }else{  document.write("JS功能强大，要学习噢!");   }
</script>

注: 消息对话框是排它的，即用户在点击对话框按钮前，不能进行任何其它操作。

2.3、提问（prompt 消息对话框）

prompt弹出消息对话框, 通常用于询问一些需要与用户交互的信息。
弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。

语法:

prompt(str1, str2);

参数说明：

str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改

返回值:

1. 点击确定按钮，文本框中的内容将作为函数返回值
2. 点击取消按钮，将返回null

看看下面代码:

var myname=prompt("请输入你的姓名:");
if(myname!=null){   alert("你好"+myname); }
else{  alert("你好 my friend.");  }

结果:

三、打开或者关闭窗口

3.1、打开新窗口（window.open）

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法：

window.open([URL], [窗口名称], [参数字符串])

参数说明:

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

窗口名称：可选参数，被打开窗口的名称。

该名称由字母、数字和下划线字符组成。
"_top"、"_blank"、"_self"具有特殊意义的名称。
- _blank：在新窗口显示目标网页
- _self：在当前窗口显示目标网页
- _top：框架网页中在上部窗口中显示目标网页
相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
name 不能包含有空格。
如果传的名称是特殊意义名称之外的名称或者不传，都会在新窗口显示目标网页。

参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

参数表:

例如:打开 http://www.imooc.com 网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：

<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>

注意：运行结果考虑浏览器兼容问题。

3.2、关闭窗口

close() 关闭窗口

用法：

window.close();   //关闭本窗口

或

<窗口对象>.close();   //关闭指定的窗口

例如:关闭新建的窗口。

<script type="text/javascript">var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中mywin.close();
</script>

注意：上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口。

四、计时器

在 JavaScript 中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

计时器类型：

一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。

计时器方法：

方法	描述
setInterval()	每隔指定的时间执行代码
setTimeout()	在指定的延迟时间之后来执行代码
clearInterval()	取消 setInterval() 设置
clearTimeout()	取消 setTimeout() 设置

4.1、计时器 setInterval()

在执行时，从载入页面后每隔指定的时间执行代码。

语法：

setInterval(代码,交互时间);

参数说明：

1、代码：要调用的函数或要执行的代码串。

2、交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值：

一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用函数格式（假设有一个 clock()函数）：

setInterval("clock()",1000)
或
setInterval(clock,1000)

我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">var int=setInterval(clock, 100)function clock(){var time=new Date();document.getElementById("clock").value = time;}
</script>
</head>
<body><form><input type="text" id="clock" size="50"  /></form>
</body>
</html>

4.2、取消计时器 clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：

clearInterval(id_of_setInterval)

参数说明:

id_of_setInterval：由 setInterval() 返回的 ID 值。

实例

每隔 100 毫秒调用clock()函数,并显示时间。
当点击按钮时，停止时间,代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">function clock(){var time=new Date();                     document.getElementById("clock").value = time;}
// 每隔100毫秒调用clock函数，并将返回值赋值给ivar i=setInterval("clock()",100);
</script>
</head>
<body><form><input type="text" id="clock" size="50"  /><input type="button" value="Stop" onclick="clearInterval(i)"  /></form>
</body>
</html>

4.3、计时器 setTimeout()

setTimeout() 计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法：

setTimeout(代码,延迟时间);

参数说明：

1、要调用的函数或要执行的代码串。

2、延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

实例

当我们打开网页3秒后，在弹出一个提示框，代码如下:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>

当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){var t=setTimeout("alert('Hello!')",5000);}
</script>
</head>
<body>
<form><input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>

要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){document.getElementById('txt').value=num;num=num+1;setTimeout("numCount()",1000);}
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>

4.4、取消计时器 clearTimeout()

setTimeout()和 clearTimeout() 一起使用，停止计时器。

语法:

clearTimeout(id_of_setTimeout)

参数说明:

id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

实例

下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 "Stop" 按钮来停止这个计数器：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">var num=0,i;function timedCount(){document.getElementById('txt').value=num;num=num+1;i=setTimeout(timedCount,1000);}setTimeout(timedCount,1000);function stopCount(){clearTimeout(i);}
</script>
</head>
<body><form><input type="text" id="txt"><input type="button" value="Stop" onClick="stopCount()"></form>
</body>
</html>

转载于:https://my.oschina.net/Agnes2017/blog/2208898

JavaScript 基础（十三）：Window对象相关推荐

JavaScript函数与Window对象
JavaScript函数与Window对象一.函数的使用函数的含义:类似于Java中的方法,是完成特定任务的代码语句块 ◆常用系统函数: parseInt ("字符串") ...
javascript百炼成仙第一章掌握JavaScript基础1.7 对象数据类型
听到这句话,叶小凡一顿,动作停止了下来. 对象数据类型,这在JavaScript基础修炼要诀中只是提了一下,但是并没有细讲,这个对象数据类型一直以来都深深地勾起了叶小凡的好奇心. "小娃娃, ...
JavaScript 基础(三) - Date对象，RegExp对象，Math对象，Window 对象，History 对象，Location 对象，DOM 节点...
Date对象创建Date对象 //方法1:不指定参数var date_obj = new Date();alert(date_obj.toLocaleString())//方法2:参数为日期字符串v ...
JavaScript权威指南--window对象
知识要点 window对象及其客户端javascript所扮演的核心角色:它是客户端javascript程序的全局对象.本章介绍window对象的属性和方法,这些属性定义了不同的API,但是只有一部分 ...
javascript百炼成仙第一章掌握JavaScript基础1.8 对象的取值
"小娃娃,我现在问你,如果我事先不知道对象的某个属性叫什么,那又该怎么访问对象中对应这个属性的值呢?"叶老笑呵呵地问到. "什么什么,事先都不知道对象的属性名称,那怎么可 ...
JavaScript中的window对象详解
1.window对象简介 (1)在JavaScript中,一个浏览器窗口就是一个window对象. (2)一个窗口就是一个window对象,这个窗口里面的HTML文档就是一个document对象,do ...
JavaScript 控制台打印window对象
示例代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
JavaScript基础语法_JavaScript对象
JavaScript对象 JavaScript 是一种面向对象的编程语言,在 JavaScript 中几乎所有的东西都是对象.因此,要想有效的使用 JavaScript,首先需要了解对象的工作原理以及 ...
JavaScript基础之Number对象和Math对象
2019独角兽企业重金招聘Python工程师标准>>> //Math对象//属性float Math.E; //返回自然对数的底数e,约2.718float Math.LN2; // ...
javascript基础知识(6) 对象
对象 JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成. JavaScript的对象用于描述现实世界中的某个对象.例如,为了描述"小明"这个淘气的小朋友,我们 ...

JavaScript 基础（十三）：Window对象

一、 window对象简介

二、对话框方法

2.1、警告（alert 消息对话框）

2.2、确认（confirm 消息对话框）

2.3、提问（prompt 消息对话框）

三、打开或者关闭窗口

3.1、打开新窗口（window.open）

3.2、关闭窗口

四、计时器

计时器类型：

计时器方法：

4.1、计时器 setInterval()

语法：

参数说明：

返回值：

调用函数格式（假设有一个 clock()函数）：

4.2、取消计时器 clearInterval()

语法：

参数说明:

实例

4.3、计时器 setTimeout()

语法：

参数说明：

实例

4.4、取消计时器 clearTimeout()

语法:

参数说明:

实例

JavaScript 基础（十三）：Window对象相关推荐

最新文章

热门文章

JavaScript 基础（十三）：Window对象

一、 window对象简介

二、对话框方法

2.1、 警告（alert 消息对话框）

2.2、确认（confirm 消息对话框）

2.3、提问（prompt 消息对话框）

三、打开或者关闭窗口

3.1、打开新窗口（window.open）

3.2、关闭窗口

四、计时器

计时器类型：

计时器方法：

4.1、计时器 setInterval()

语法：

参数说明：

返回值：

调用函数格式（假设有一个 clock()函数）：

4.2、 取消计时器 clearInterval()

语法：

参数说明:

实例

4.3、 计时器 setTimeout()

语法：

参数说明：

实例

4.4、 取消计时器 clearTimeout()

语法:

参数说明:

实例

JavaScript 基础（十三）：Window对象相关推荐

最新文章

热门文章

2.1、警告（alert 消息对话框）

4.2、取消计时器 clearInterval()

4.3、计时器 setTimeout()

4.4、取消计时器 clearTimeout()