js第6章BOM案例：打开和关闭窗口、窗口位置和大小、计数器、更改URL、获取URL参数、历史记录跳转、navigator对象和screen对象、红绿灯倒计时_将某一个十字路口的交通信号灯每分钟红灯亮设置为30秒,绿灯亮设置为35秒,黄灯亮设-CSDN博客

分类		名称		说明
属性		closed		返回一个布尔值，该值声明了窗口是否已经关闭
		name		设置或返回存放窗口名称的一个字符串
		opener		返回对创建该窗口的window对象的引用
		parent		返回当前窗口的父窗口
		self		对当前窗口的引用，等价于window属性
		top		返回最顶层的父窗口
方法		alert()		显示带有一段消息和一个确认按钮的警告框
		confirm()		显示带有一段消息以及确认按钮和取消按钮的对话框
方法	prompt()		显示可提示用户输入的对话框
	open()		打开一个新的浏览器窗口或查找一个已命名的窗口
	close()		关闭浏览器窗口
	focus()		把键盘焦点给予一个窗口
	print()		打印当前窗口的内容
	scrollBy()		按照指定的像素值来滚动内容
	scrollTo()		把内容滚动到指定的坐标

弹出对话框和窗口——open()方法

name可选值

name可选值	含义
_blank	URL加载到一个新的窗口，也是默认值
_parent	URL加载到父框架
_self	URL替换当前页面
_top	URL替换任何可加载的框架集
name	窗口名称

specs可选值

specs可选参数	值	说明
height	Number	窗口的高度，最小值为100
left	Number	该窗口的左侧位置
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
width	Number	窗口的宽度，最小值为100

<body>
    <p><input type="button" value="打开窗口" onclick="openWin()"></p>
    <p><input type="button" value="关闭窗口" onclick="closeWin()"></p>
    <p><input type="button" value="检测窗口是否关闭" onclick="checkWin()"></p>
    <p id="msg"></p>
    <script>
      var myWindow;
      function openWin() {
        myWindow = window.open('', 'newWin', 'width=400,height=200,left=200');
        myWindow.document.write('<p>窗口名称为：' + myWindow.name + '</p>');
        myWindow.document.write('<p>当前窗口的父窗口地址：' + window.parent.location + '</p>');
      }
      function closeWin() {
        myWindow.close();
      }
      function checkWin() {
        if (myWindow) {
          var str = myWindow.closed ? '窗口已关闭！' : '窗口未关闭！';
        } else {
          var str = '窗口没有被打开!';
        }
        document.getElementById('msg').innerHTML = str;
      }
   </script>
</body>

运行效果：

2.窗口位置和大小

分类		名称		说明
属性		screenLeft		返回相对于屏幕窗口的x坐标（Firefox不支持）
		screenTop		返回相对于屏幕窗口的y坐标（Firefox不支持）
		screenX		返回相对于屏幕窗口的x坐标（IE8不支持）
		screenY		返回相对于屏幕窗口的y坐标（IE8不支持）
		innerHeight		返回窗口的文档显示区的高度（IE8不支持）
		innerWidth		返回窗口的文档显示区的宽度（IE8不支持）
		outerHeight		返回窗口的外部高度，包含工具条与滚动条（IE8不支持）
		outerWidth		返回窗口的外部宽度，包含工具条与滚动条（IE8不支持）
方法	moveBy()		将窗口移动到相对的位置
	moveTo()		将窗口移动到指定的位置
	resizeBy()		将窗口大小调整到相对的宽度和高度
	resizeTo()		将窗口大小调整到指定的宽度和高度

<body>
    <input type="button" value="打开窗口" onclick="openWin()">
    <input type="button" value="调整窗口位置和大小" onclick="changeWin()">
    <script>
      var myWindow;
      function openWin() {
        myWindow = window.open('', 'newWin', 'width=250,height=300');
        getPosSize();                   // 获取窗口信息
      }
      function changeWin() {
        myWindow.moveBy(250, 250);      // 将newWin窗口下移250像素，右移250像素
        myWindow.focus();               // 获取移动后newWin窗口的焦点
        myWindow.resizeTo(500, 350);    // 修改newWin窗口的宽度为500，高度为350
        getPosSize();                   // 获取窗口信息
      }
      function getPosSize() {
        // 获取相对于屏幕窗口的坐标
        var x = myWindow.screenLeft, y = myWindow.screenTop;
        // 获取窗口和文档的高度和宽度
        var inH = myWindow.innerHeight, inW = myWindow.innerWidth;
        var outH = myWindow.outerHeight, outW = myWindow.outerWidth;
        myWindow.document.write('<p>相对屏幕窗口的坐标：(' + x + ',' + y + ')</p>');
        myWindow.document.write('<p>文档的高度和宽度：' + inH + ',' + inW + '</p>');
        myWindow.document.write('<p>窗口的高度和宽度：' + outH + ',' + outW + '</p><hr>');
      }
   </script>
</body>

运行效果：

3.计数器

方法	说明
setTimeout()	在指定的毫秒数后调用函数或执行一段代码
setInterval()	按照指定的周期（以毫秒计）来调用函数或执行一段代码
clearTimeout()	取消由setTimeout()方法设置的定时器
clearInterval()	取消由setInterval()设置的定时器

setTimeout()和setInterval()方法区别：相同点：都可以在一个固定时间段内执行JavaScript程序代码。不同点：setTimeout()只执行一次代码，setInterval()会在指定的时间后，自动重复执行代码。

<body>
    <input type="button" value="开始计数" onclick="startCount()">
    <input id="num" type="text">
    <input type="button" value="停止计数" onclick="stopCount()">
    <script>
      var timer = null, c = 0;
      function timedCount() {       // 在文本框中显示数据
        document.getElementById('num').value = c;
        ++c;                        // 显示数据加1
      }
      function startCount() {       // 开始间歇调用
        timer = setInterval(timedCount, 1000);
      }
      function stopCount() {        // 清除间歇调用
        clearInterval(timer);
      }
    </script>
</body>

运行效果：

4.更改URL

名称	说明
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

reload()方法的唯一参数，是一个布尔类型值，将其设置为true时，它会绕过缓存，从服务器上重新下载该文档，类似于浏览器中的刷新页面按钮。

5.获取URL参数

获取URL的指定部分：location.属性名。设置URL的指定部分：location.属性名 = 值。

location对象的属性

属性	说明	属性	说明
hash	返回一个URL的锚部分	pathname	返回URL的路径名
host	返回一个URL的主机名和端口	port	返回一个URL服务器使用的端口号
hostname	返回URL的主机名	protocol	返回一个URL协议
href	返回完整的URL

<body>
    <input type="button" value="载入新文档" onclick="newPage()">
    <input type="button" value="刷新页面" onclick="freshPage()">
    <p id="time"></p>
    <script>
      // 获取并显示当前页面载入的时间
      var ds = new Date(), d = ds.getDate();
      var t = ds.toLocaleTimeString();
      document.getElementById('time').innerHTML = t;
      // 载入新文档
      function newPage() {
        window.location.assign('http://www.example.com')
      }
      // 刷新文档
      function freshPage() {
        location.reload(true);
      }
    </script>
</body>

运行效果：

6.历史记录跳转

history对象的属性和方法

分类	名称	说明
属性	length	返回历史列表中的网址数
方法	back()	加载history列表中的前一个URL
	forward()	加载history列表中的下一个URL
	go()	加载history列表中的某个具体页面

<body>
    <input type="button" value="前进" onclick="goForward()">
    <input type="button" value="新网页" onclick="newPage()">
    <script>
      function newPage() {      // 打开一个新的文档
        window.location.assign('show.html');
      }
      function goForward() {    // 前进
        history.go(1);
      }
    </script>
</body>

show.html

<body>
    <input type="button" value="后退" onclick="goBack()">
    <script>
      function goBack() {
        history.go(-1);
      }
    </script>
</body>

运行效果：

无刷新更改URL地址

pushState()方法会改变浏览器的历史列表中记录的数量。

replaceState()方法仅用于修改历史记录，历史记录列表的数量不变，与location.replace()方法的功能类似。

7. navigator对象和screen对象

navigator对象提供了有关浏览器的信息。

navigator对象的属性和方法

分类	名称	说明
属性	appCodeName	返回浏览器的内部名称
	appName	返回浏览器的名称
	appVersion	返回浏览器的平台和版本信息
	cookieEnabled	返回指明浏览器中是否启用cookie的布尔值
	platform	返回运行浏览器的操作系统平台
	userAgent	返回由客户端发送服务器的User-Agent头部的值
方法	javaEnabled()	指定是否在浏览器中启用Java

screen对象用于返回当前渲染窗口中与屏幕相关的属性信息，如屏幕的宽度和高度等。

screen对象的属性和方法

名称	说明
height	返回整个屏幕的高
width	返回整个屏幕的宽
availHeight	返回浏览器窗口在屏幕上可占用的垂直空间
availWidth	返回浏览器窗口在屏幕上可占用的水平空间
colorDepth	返回屏幕的颜色深度
pixelDepth	返回屏幕的位深度/色彩深度

8.红绿灯倒计时。

现实生活中,为保证行人和车辆安全有序地通行,交叉路口都会设置交通信号灯。横向三色交通信号灯的亮灯顺序一般为“绿→黄→红→绿”依次循环。其中,亮灯时长需根据路口的实际情况等因素来考虑设置。例如,将某一个十字路口的交通信号灯每分钟红灯亮设置为30秒,绿灯亮设置为35秒,黄灯亮设置为5秒。

<style>
      .box{width:250px;height:52px;padding:15px 30px;border:2px solid #ccc;border-radius:16px;margin:0 auto;}
      .box .count{width:60px;color:#666;font-size:280%;line-height:50px;padding-left:6px;margin-left:5px;border:1px solid #fff}
      .box div{margin-left:5px;float:left;width:50px;height:50px;border-radius:50px;border:1px solid #666;}
      .gray{background-color:#eee;}
      .red{background-color:red;}
      .yellow{background-color:yellow;}
      .green{background-color:#26ff00;}
</style>

<body>
    <div class="box">
      <div id="red"></div>
      <div id="yellow"></div>
      <div id="green"></div>
      <div class="count" id="count"></div>
    </div>
    <script>
      // 获取红、黄、绿灯以及倒计时的元素对象
      var lamp = {
        red: {
          obj: document.getElementById('red'),
          timeout: 30,
          style: ['red', 'gray', 'gray'],
          next: 'green'
        },
        yellow: {
          obj: document.getElementById('yellow'),
          timeout: 5,
          style: ['gray', 'yellow', 'gray'],
          next: 'red'
        },
        green: {
          obj: document.getElementById('green'),
          timeout: 35,
          style: ['gray', 'gray', 'green'],
          next: 'yellow'
        },
        changeStyle(style) {
          this.red.obj.className = style[0];
          this.yellow.obj.className = style[1];
          this.green.obj.className = style[2];
        }
      };
      var count = {
        obj: document.getElementById('count'),
        change: function(num) {
          this.obj.innerHTML = (num < 10) ? ('0' + num) : num;
        }
      };
      var now = lamp.green;
      var timeout = now.timeout;
      lamp.changeStyle(now.style);
      count.change(timeout);
      setInterval(function() {
        if (--timeout <= 0) {
          now = lamp[now.next];
          timeout = now.timeout;
          lamp.changeStyle(now.style);
        }
        count.change(timeout);
      }, 1000);
    </script>
</body>

运行效果：