奋斗30天Javascript之BOM模型中常用對象的介紹（Part9）

本文链接：https://blog.csdn.net/weixin_41406727/article/details/88591928

BOM - Javascript是運行在瀏覽器中的，所以提供了一系列對象用於和瀏覽器窗口進行交互，這些對象主要包括window、document、location、navigator和screen等。通常統稱為瀏覽器對象模型（Brower Object Model）

window對象是整個Javascript腳本運行的頂層對象，它的常用屬性如下：

document	返回該窗口內裝載的HTML文檔
location	返回該窗口裝載的HTML的URL
navigtor	返回瀏覽當前頁面的瀏覽器，包含了一系列的瀏覽器屬性，包括名稱、版本號、平台等
screen	返回當前瀏覽者屏幕對象
history	返回該瀏覽窗口的歷史

提示：這些屬性都是屬於window對象的子對象，每個子對象內部也提供了各自的屬性和方法來進行對瀏覽器的操作。

alert()、confirm()、prompt()	分別用於彈出警告窗口、確認對話框和提示輸入對話
close()	關閉窗口
moveBy()、moveTo()	移動窗口（不兼容谷歌）
resizeBy()、resizeTo()	重設窗口大小（不兼容谷歌）
scrollBy()、scrollTo()	滾動當前窗口的HTML文檔
open()	打開一個新的瀏覽器窗口加載新的URL所指向的地址，一系列新的屬性，包括隱藏菜單等
setInterval()、clearInteral()	設置、刪除定時器

1：JavaScript-确认（confirm 消息对话框）

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

语法:confirm(str);
参数说明:
str：在消息对话框中要显示的文本

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type = "button" onclick="confirms()">查閱</button>
<script>
function confirms(){
	var text = window.confirm("是否退出？");
	if(text){
		alert("再見")
	}else{
		alert("hello")
	}
}
</script>

</body>
</html>

結果如下：

點擊確定彈出：

點擊取消彈出：

2：JavaScript-关闭窗口（window.close）

用法：

window.close(); //关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口
例如:关闭新建的窗口。

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type = "button" onclick="confirms()">查閱</button>
<script>
function confirms(){
	var text = window.confirm("是否退出？");
	if(text){
		close()
	}else{
		alert("hello")
	}
}
</script>

</body>
</html>

結果為：點擊確定直接退出關閉該彈出框。

3：JavaScript-提问（prompt 消息对话框）

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

语法:

prompt(str1, str2);

参数说明：

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

返回值:

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

2. 点击取消按钮，将返回null

看看下面代码

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

栗子：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prompt</title>
  <script type="text/javascript">
function ww(){
    var aa;
    aa=prompt("ok?");
    if(aa>=90){
        document.write("best")
    }
    else if(aa>=70){
        document.write("great")
    }
    else{
        document.write("lose")
    };
    
    }
  </script>
</head>
<body>
<input name="button" value="成績" type="button" onclick="ww()"/>
</body>
</html>

注：輸入相應的分數在頁面會有相應的表揚。

4：JavaScript-打开新窗口（window.open）

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

语法：

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

参数说明:

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
    1.该名称由字母、数字和下划线字符组成。
    2."_top"、"_blank"、"_self"具有特殊意义的名称。
       _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页
    3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
   4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

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

栗子一：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
  function Wopen(){
      window.open('http://www.imooc.com','_blank','width=600,height=400,menubar=no,toolbar=no,status=no,scrollbars=yes,left=0,top=100')
      

  } 
</script>
</head>
<body>
    <input name="button" type="button" onclick="Wopen()" value="点击我，打开新窗口!">
</body>
</html>

栗子二：

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

練習：

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript">  
function openWindow()
{var open=confirm("确认新建窗口打开网站吗？");
if(open==true)
    // 新窗口打开时弹出确认框，是否打开
{var url=prompt("通过输入对话框，确定打开的网址","http://www.imooc.com");
if(url!=null)
    // 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/
{window.open(url,"_blank",'width=400px,height=500px,menubar=no,toolbar=no');    
}
    //打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。
else
{alert("再见！");}
}   
else
{alert("再见！");}
    }



  </script> 
 </head> 
 <body> 
	  <input type="button" value="新窗口打开网站" onclick="openWindow()" /> 
 </body>
</html>

轉載自《JavaScript入门篇》一文：https://www.imooc.com/learn/36

5：计时器setInterval()

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

语法:

setInterval(代码,交互时间);

参数说明：

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

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

返回值:

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

调用函数格式(假设有一个clock()函数):

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

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

计时器方法：

栗子一：

<html>
<body>

<input type="text" id="clock" />
<script type="text/javascript">
var int=self.setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
}
</script>

<button onclick="int=window.clearInterval(int)">停止</button>

</body>
</html>

點擊停止則定時器停止走動。

栗子二：(第一種方法)

<!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(); 
    var myhours=time.getHours();
    if(myhours<10){myhours="0"+myhours};
    var myminute=time.getMinutes();
    if(myminute<10){myminute="0"+myminute};
    var mysecond=time.getSeconds();
    if(mysecond<10){mysecond="0"+mysecond};
    attime=myhours+":"+myminute+":"+mysecond;
    document.getElementById("clock").value = attime;
  }
    var timer = setInterval(clock,1000);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50"  />
</form>
</body>
</html>

當時分秒前面小於10在前加0，結果如下：

第二種辦法：

<input id='mydatepicker' type='text' autocomplete="off"/>

$(function(){
			function Appendzero(obj) {
		        if(obj<10) return "0" +""+ obj;
		        else return obj;
		    }
			var dates=new Date();
			var years=dates.getFullYear();
			var months=dates.getMonth()+1;
			var daTe=dates.getDate();
			var datEs=years + " - "+Appendzero(months) + " - " + Appendzero(daTe);
			$(".datetime form input[type=text]").val(datEs);
		})

6：取消计时器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函数，并将返回值赋值给i
     var 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>

7-1：History 对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

语法：

window.history.[属性|方法]

注意：window可以省略。

History 对象属性：

History 对象方法：

使用length属性，当前窗口的浏览历史总长度，代码如下：

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

栗子：第一頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    onepage
    <a href = "2.html">下一頁</a>
</body>
</html>

第二頁：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    twopage
    <a href = "3.html">下一頁</a><br/>
    <a href="javascript:history.back()">後退</a>
    <a href="javascript:history.forward()">前進</a>
</body>
</html>

第三頁：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    threepage
    <a href="javascript:history.back()">後退</a>
</body>
</html>

PS：

go(1) = forward;

go(-1) = back

7-2：返回前一个浏览的页面

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

语法：

window.history.back();

比如，返回前一个浏览的页面，代码如下：

window.history.back();

注意：等同于点击浏览器的倒退按钮。

back()相当于go(-1),代码如下:

window.history.go(-1);

7-3：返回浏览历史中的其他页面

go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。

语法：

window.history.go(number);

参数：

浏览器中，返回当前页面之前浏览过的第二个历史页面，代码如下：

window.history.go(-2);

注意：和在浏览器中单击两次后退按钮操作一样。

同理，返回当前页面之后浏览过的第三个历史页面，代码如下：

window.history.go(3);

8：计时器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>

9：取消计时器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>

10：Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。

语法:

location.[属性|方法]

location对象属性图示:

location 对象属性：

location 对象方法:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>location</title>
</head>
 <script type="text/javascript">
        document.write(window.location.href);
     
 </script>
</head>
<body>
</body>
</html>

結果為：https://www.imooc.com/code/1153

11：Navigator对象

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

对象属性:

查看浏览器的名称和版本，代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
   var browser=navigator.appName;
   var b_version=navigator.appVersion;
   document.write("Browser name"+browser);
   document.write("<br>");
   document.write("Browser version"+b_version);
</script>
<body>
</body>
</html>

結果為：

Browser nameNetscape
Browser version5.0 (Windows NT 10.0; Win64; x64)

AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/72.0.3626.121 Safari/537.36

12：screen对象

screen对象用于获取用户的屏幕信息。

语法：

window.screen.属性

对象属性:

13：屏幕分辨率的高和宽

window.screen 对象包含有关用户屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
注意:
1.单位以像素计。
2. window.screen 对象在编写时可以不使用 window 这个前缀。
我们来获取屏幕的高和宽，代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏幕分辨率的高和宽</title>
</head>
<body>
<script type="text/javascript">
document.write( "屏幕宽度："+screen.width+"px<br/>");
document.write( "屏幕高度："+screen.height+"px");       
</script>
</body>
</html>

結果為：

屏幕宽度：1600px
屏幕高度：900px

14：屏幕可用高和宽度

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

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

注意:

不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。

我们来获取屏幕的可用高和宽度，代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏幕分辨率的高和宽</title>
</head>
<body>
<script type="text/javascript">
document.write("可用宽度：" +screen.availWidth );
document.write("可用高度："+screen.availHeight  );     
</script>
</body>
</html>

結果為：

可用宽度：1600可用高度：860

練習：當定時器從3到0，就打開該頁面：

<!DOCTYPE html>
<html>
 <head>
  <title>浏览器对象</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>   
 </head>
 <body>
  <!--先编写好网页布局-->
  <h1>操作成功</h1>
<span id="sp" >3</span>
  <span >秒后回到主页</span>
  <a href="javascript:back();">返回</a>
  
  
 
 <script type="text/javascript">
		onload=function(){
			setInterval(go, 1000);
		};
		var x=3; //利用了全局变量来执行
		function go(){
		x--;
			if(x>=0){
			document.getElementById("sp").innerHTML=x;  //每次设置的x的值都不一样了。
			}else{
			location.href='https://www.imooc.com/code/1633';
			}
		}
	</script>
</body>
</html>

轉自 YX_blog《HTML页面-------3秒之后自动跳转的3种常用的实现方式》一文：https://blog.csdn.net/yangxin_blog/article/details/50183717