Window 对象
[toc]
window 对象
window对象是BOM的核心, window对象指当前的浏览器窗口.
window常用对象方法
| 方法 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告窗 |
| prompt() | 显示可提示用户输入的对话框 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
| open() | 打开啊一个新的浏览器窗口或查找一个已命名的窗口 |
| close() | 关闭浏览器窗口 |
| print() | 打印当前窗口的内容 |
| scrollBy() | 按照指定的像素值来滚动内容 |
| scrollTo() | 把内容滚动到指定的坐标 |
| setInterval() | 每隔指定的时间执行代码 |
| setTimeout() | 在指定的延迟时间后来执行代码 |
| clearInterval() | 取消setInterval()的设置 |
| clearTimeout() | 取消setTimeout()的设置 |
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>window对象</title><script type="text/javascript">function openWindow() {var a = confirm("欢迎━(*｀∀´*)ノ来到百度，点击【确定】一起嗨!");if (a == true) {window.open('https://www.baidu.com', '_blank', 'width=600px,height=400px');}else {return;}}</script></head><body><form><input type="button" value="点击我，打开新窗口" onclick="openWindow()" /></form></body></html>
JavaScript 计时器
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器方法：
| 方法 | 描述 |
|---|---|
| setInterval() | 每隔指定的时间执行代码 |
| setTimeout() | 在指定的延迟时间后来执行代码 |
| clearInterval() | 取消setInterval()的设置 |
| clearTimeout() | 取消setTimeout()的设置 |
计时器setInterval()
在执行时,从载入页面后每隔指定的时间执行代码。
语法:
setInterval(代码,交互时间);
参数说明：
代码：要调用的函数或要执行的代码串。
交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（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 attime;function clock() {var time = new Date();attime = time.getHours() + " : " + time.getMinutes() + " : " + time.getSeconds();document.getElementById("clock").value = attime;}setInterval(clock,1000);</script></head><body><form><input type="text" id="clock" size="50" /></form></body></html>
取消计时器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>
计时器setTimeout()
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:
setTimeout(代码,延迟时间);
参数说明：
- 要调用的函数或要执行的代码串。
- 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
当我们打开网页3秒后，在弹出一个提示框，代码如下:
<script type="text/javascript">setTimeout("alert('Hello!')", 3000);</script>
当按钮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>
取消计时器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止计时器。
语法:
clearTimeout(id_of_setTimeout)
参数说明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 “Stop” 按钮来停止这个计数器：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>计时器</title><script type="text/javascript">var num = 0;var i;function startCount() {document.getElementById('count').value = num;num = num + 1;i = setTimeout("startCount()", 1000);}function stopCount() {clearTimeout(i);}</script></head><body><form><input type="text" id="count" /><input type="button" value="Start" onclick="startCount()" /><input type="button" value="Stop" onclick="stopCount()" /></form></body></html>
返回前一个浏览的页面
window.history.back();
或者
window.history.go(-1)
返回下一个浏览的页面
window.history.forward();
或者
window.history.go(1);
Location对象
location用于获取或设置窗体的URL，并且可以用于解析URL。
语法
location.[属性|方法]
例如URL
http://www.test.com:8080/list.php?uid=8&charpterid=86#mediaid118
<html><head><meta charset="utf-8"><title>Test.CC</title><script type="text/javascript">document.write(window.location.protocol);document.write("<br>")document.write(window.location.host);document.write("<br>")document.write(window.location.hostname);document.write("<br>")document.write(window.location.port);document.write("<br>")document.write(window.location.pathname);document.write("<br>")document.write(window.location.search);document.write("<br>")document.write(window.location.hash);</script></head><body><div><!-- 下面是输出结果 -->http:www.test.com:8080www.test.com8080/index.php?uid=8&charpterid=86#mediaid118</div></body></html>
编程练习
倒计时任务, 5秒后跳转到指定页面, 亦可点击返回按钮返回前一页.
<!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><span id='myspan'></span>秒后回到主页<a href="http://www.baidu.com" onclick="window.history.back()">返回</a></body><script type="text/javascript">//获取显示秒数的元素，通过定时器来更改秒数。let seconds = document.getElementById('myspan');let i = 5;function tiktok(){if(i < 1){window.location.href = "http://www.baidu.com";}else{i = i-1;seconds.innerText = i;}}//通过window的location和history对象来控制网页的跳转。window.onload=function(){seconds.innerText = i;setInterval(tiktok,1000);}</script></html>
