BOM window对象

JavaScript学习 本文总阅读量次

注意

  • 敲代码时一定要注意，<script>中用到的属性值要加引号！（style中不用）

Window对象的方法

  • window 对象表示浏览器中打开的窗口。
  • 注意： 弹框中的文本需要 换行 使用 \n

alert()消息+确认按钮的警告框

  • 语法：window.alert（"content")
  • 功能：显示带有一段消息和一个确认按钮的警告框

confirm()消息+OK+取消按钮的对话框

  • 语法：window.confirm（“你想要显示的提示消息"）
  • 功能：显示一个带有指定消息和OK及取消按钮的对话
  • 返回值 （布尔型）：
    • 如果用户点击确定按钮，则confirm（）返回true
    • 如果用户点击取消按钮，则confirm（）返回false
  • 举例：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <body>
    	<div id="box">
    		<span>iphone6s</span>
    		<input type="button" value="删除" id="btn">
    	</div>
    	<script>
           // 获取按钮,绑定事件
           var btn=document.getElementById("btn");
           btn.onclick=function(){
           	   // 弹出确认对话框
           	   var result=window.confirm("您确定要删除吗？删除之后该信息\n将不可恢复！");
           	   if(result){
                  document.getElementById("box").style.display="none";
           	   }
           }
        </script>
    </body>

prompt()消息+输入框+OK+取消按钮的对话框

  • 语法：window.prompt（"text，defaultText"）
    • text：要在对话框中显示的纯文本（而不是HTML格式的文本）
    • defaultText：默认的输入文本
  • 返回值 （字符串）：
    • 如果用户单击提示框的取消按钮，则返回null
    • 如果用户单击确认按钮，则返回输入字段当前显示的文本
  • 举例：
    刷新页面时就会弹出提示框，点击“取消”发现打印出null，点击“确认”，发现返回默认的输入文本”天蝎座”，输入“金牛座”再点击“确认”，返回的是“金牛座”。
    1
    2
    3
    4
    5
    6
    <body>
        <script>
            var message=prompt("请输入您的星座","天蝎座");
            console.log(message);
    	</script>
    </body>

编程练习

点击页面上的“删除”按钮，弹出确认框
（1）当点击确认框上的“确定“时，按钮上的字变为红色；
（2）当点击确认框上的“取消“时，按钮上的字变为绿色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
    <input type="button" value="删除" id="btn">
    <script type="text/javascript">
        // 获取按钮
        var btn=document.getElementById("btn");
        // 绑定鼠标单击事件
        btn.onclick=function(){
            // 弹框
            var result=window.confirm("确定要删除吗？")
            if(result){
                // 一定要注意，属性值要加引号！
                btn.style.color="red";
            }else{
                btn.style.color="green";
            }
        }
    </script>
</body>

地址：E:\慕课网 前端小白入门系列课程完整版\JavaScript\7.javascriptBOM对象\test1.html

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

  • 语法：window.open（pageURL，name，parameters）
    • pageURL：子窗口路径（同一目录下可以直接写文件名称）。
    • name：子窗口句柄。（name声明了新窗口的名称，方便后期通过name对子窗口进行引用）
    • parameters：窗口参数（各参数用逗号分隔）
  • 功能：打开一个新的浏览器窗口或查找一个已命名的窗口
  • 窗口参数包括：
    • width：窗口宽度
    • height：窗口高度
    • left：窗口X轴坐标
    • top：窗口Y轴坐标
    • toolbar：是否显示浏览器的工具栏
    • menubar：是否显示菜单栏
    • scrollbars：是否显示滚动条
    • location：是否显示地址字段
    • status：是否添加状态栏

close()关闭浏览器窗口

  • 语法：window.close（）
  • 功能：关闭浏览器窗口

合并举例

同目录下两个页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
	<input type="button" value="退 出" id="quit">
	<script>
       window.onload = function(){
       	  // 打开子窗口，显示newwindow.html
       	  window.open("newwindow.html","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
       	  var quit = document.getElementById("quit");
       	  // 点击关闭当前窗口（子窗口是不会关的，可以在子窗口内做一个退出按钮）
       	  quit.onclick = function(){
       	  	  window.close();
       	  }
       }
	</script>
</body>

第二个页面（newwindow.html）
1
2
3
<body>
	<h1>hello window.open</h1>
</body>

超时调用与间歇调用

注意

  • 首先要明确JavaScript是单线程语言，单线程就是所执行的代码必须按照顺序。
  • 【1秒等于1000毫秒】

setTimeout()超时调用

  • 语法：setTimeout（code，millisec）
    • code：要调用的函数或要执行的JavaScript代码串
      【注意：并不建议写代码串，最好是用匿名函数或者自定义函数】
    • millisec：在执行代码前需等待的毫秒数
  • 功能：在指定的毫秒数后调用函数或计算表达式 ,即延长多少时间以后再发生这个事。
  • 说明：setTimeout（）只执行code一次。如果要多次调用，请使用setlnterval（）或者让code自身再次调用setTimeout（）【例子在下面】

使用超时调用实现多次调用的例子

让setTimeout（）自身再次调用setTimeout（）实现间隔一秒输出数字1-10：

  1. 函数inCreamentNum调用时先打印num（1）
  2. 递增（num=2），然后判断是否小于max（10）
  3. 如果小于则再次调用setTimeout（），输出num（2）
  4. 一直到num为11时清除延时调用。
  5. 补充：timer之所以给null而不是空字符是因为超时调用的id是个对象，建议给null来释放内存是因为空字符就指定了这个对象实例的值是一个长度为0的空字符串。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <body>
        <script>
            var num=1,
                max=10,
                timer=null;
            // 使用超时调用实现间隔一秒输出数字1-10
           function inCreamentNum(){
               console.log(num);   // 1 2 3 ... 10 
               num++;      
               if(num<=max){
                  setTimeout(inCreamentNum,1000);
               }else{
               	  clearTimeout(timer);
               }
           }
           timer=setTimeout(inCreamentNum,1000);
    	</script>
    </body>

clearTimeout()清除（取消）超时调用

  • SetTimeout方法返回一个ID值，我们可以通过它取消超时调用。
  • 语法：clearTimeout（id_of settimeout）
    • id of settimeout：由setTimeout（）返回的ID值，该值标识要取消的延迟执行代码块。
  • 功能：取消由setTimeout（）方法设置的timeout

合并举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
   <script>
      //setTimeout("alert('hello')",4000);不推荐

      //  自定义函数1
      var fnCall = function () {
         alert("world");
      }
      //  自定义函数2，调用
      //setTimeout(fnCall,5000);

      //  匿名函数
      var timeout1 = setTimeout(function () {
         alert("hello");
      }, 2000)
      
      // 清除超时调用
      clearTimeout(timeout1);
   </script>
</body>

setinterval()间歇调用

  • 语法：setinterval（code，millisec）
    • code：要调用的函数或要执行的代码串。
    • millisec：周期性执行或调用code之间的时间间隔，以毫秒计
  • 功能：每隔指定的时间执行一次代码

clearIntervall()清除间歇调用

  • 语法：clearIntervall（id of setinterval）
    • id_of_setinterval：由setinterval（）返回的ID值
  • 功能：取消由setInterval（）方法设置的interval

合并举例

打印10次”您好”：

  1. 利用间歇调用打印”您好”
  2. 延时调用使得10秒之后执行“清除间歇调用”停止打印
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <body>
    	<script>
            // 打印10次"您好"
           var intervalId=setInterval(function(){
               console.log("您好");
            },1000)

            // 10秒之后停止打印
            setTimeout(function(){
                clearInterval(intervalId);
            },10000);
        </script>
    </body>
    间隔1秒输出1-10：
  3. 利用间歇调用与递增打印
  4. 每一次递增后都判断是否到达10，到达则清除间歇调用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <body>
    	<script>
            var num=1,
                max=10,
                timer=null;
           // 每隔1秒针num递增一次，直到num的值等于max清除
          timer=setInterval(function(){
               console.log(num);
               num++;
               if(num>max){
                  clearInterval(timer);
               }
           },1000)
        </script>
    </body>
JavaScript学习