20180722- JavaScript-Bom对象

最新推荐文章于 2024-07-27 17:31:46 发布

cutebright00

最新推荐文章于 2024-07-27 17:31:46 发布

阅读量141

点赞数

分类专栏：笔记 JavaScript 文章标签：课堂笔记 Bom

本文链接：https://blog.csdn.net/cutebright00/article/details/81159595

版权

笔记同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

全局变量——脚本的任何一个地方都能调用的变量

全局方法——脚本的任何一个地方都能调用的方法

所有的全局变量和全局方法对被归在window上

window

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="box">
		<span>iphone6s</span>
		<input type="button" value="删除" id="btn">
	</div>
	<script>
       var age=15;
       function sayAge(){
       	  alert('我'+window.age);
       }
       // 声明一个全局变量
       window.username="marry";   // var username="marry";
       // 声明一个全局方法
       window.sayName=function(){
       	  alert("我是"+this.username);
       }
       //sayAge();
       //window.sayName();

       // confirm()
       // 获取按钮,绑定事件
       var btn=document.getElementById("btn");
       btn.onclick=function(){
       	   // 弹出确认对话框
       	   var result=window.confirm("您确定要删除吗？删除之后该信息\n将不可恢复！");
       	   if(result){
              document.getElementById("box").style.display="none";
       	   }
       }
       // 弹出输入框
       //var message=prompt("请输入您的星座","天蝎座");
       //console.log(message);
	</script>
</body>
</html>

open

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>open</title>
</head>
<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>
</html>

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>hello window.open</h1>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
       //setTimeout("alert('hello')",4000);
       var fnCall=function(){
       	  alert("world");
       };
       var timeout1=setTimeout(function(){
          alert("hello");
       },2000);

       clearTimeout(timeout1);

       //setTimeout(fnCall,5000);
	</script>
</body>
</html>

间歇调用

null——释放内存

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
       /* var intervalId=setInterval(function(){
           console.log("您好");
        },1000)

        // 10秒之后停止打印
        setTimeout(function(){
            clearInterval(intervalId);
        },10000);*/
        
        var num=1,
            max=10,
            timer=null;
       
       // 每隔1秒针num递增一次，直到num的值等于max清除
      /* timer=setInterval(function(){
           console.log(num);
           num++;
           if(num>max){
              clearInterval(timer);
           }
       },1000)*/

       // 使用超时调用实现
       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>
</html>