2020-7-13BOM对象

浏览器对象模型（BOM）以 window 对象为依托，表示浏览器窗口以及页面可见区域。同时， window 对象还是 ECMAScript 中的 Global 对象，因而所有全局变量和函数都是它的属性，且所有原生的构造 函数及其他函数也都存在于它的命名空间下

1.  window对象常用属性

名称	描述
history	包含了用户已浏览的 URL 的信息
location	包含关于当前 URL 的信息
document	代表给定浏览器窗口中的 HTML 文档
event	代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态

示例1：location和history

分别定义4个页面，代码基本相同

<h1>4</h1>
		<select id="loc" onchange="forward()">
			<option value="history1.html">history1</option>
			<option value="history2.html">history2</option>
			<option value="history3.html">history3</option>
			<option value="history4.html" selected="true">history4</option>
		</select>
		a <a href="javascript:history.go(1)">前进</a>
		a <a href="javascript:history.go(-1)">后退</a><!--使用这种方式调用js函数-->
		<hr >
		<img src="img/girls/zly4.png" >
		<script type="text/javascript" src="js/myjs.js"></script>

　　

　　另外定义一个js文件，使用<script type="text/javascript" src="js/myjs.js"></script>引入

function forward(){
	let loc=document.getElementById("loc");	
	window.location=loc.value;	//使用location来重新设定访问地址信息			
}

　　2.window常用函数

名称	描述
alert	显示自定义消息的对话框
confirm	显示确认对话框
prompt	显示输入对话框
setTimeout	经过指定毫秒值后计算表达式，并返回该事件对象
setInterval	每过一定时间间隔调用一次指定函数
close	关闭当前浏览器窗口

示例2：确认对话框

confirm（）方法，显示确认对话框。

let bool=confirm("你比豹子跑得快吗");
    if(bool){
        alert("你比禽兽还禽兽");
    }else{
        alert("你禽兽不如");
    }

示例3：动画播放

setTimeout（）方法，经过指定毫秒值后计算表达式，并返回该事件对象。clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

let i=0;
  let duty;
    function move(){
        i++;
        let img=document.getElementById("img");
        img.src="imgs/eat/eat_"+i+".jpg";
        if(i>39){
            i=0;
        }
        duty=setTimeout("move()",100);
  }
  function stop(){
        clearTimeout(duty);
  }

    <input type="button" value="动画" onclick="move()">
    <input type="button" value="停止" onclick="stop()">
  <img src="imgs/eat/eat_0.jpg" id="img">

　　

示例4：倒计时

每间隔1秒钟，让剩余时间减少1，并计算剩余时间核算为多少小时、多少分钟、多少秒，使用setInterval()；

 let time=7200,h,m,s;
    function showTime(){
        
        let h1=document.getElementById("h1");
        h=parseInt(time/60/60);
        m=parseInt(time%3600/60);
        s=time%60;
        h1.innerHTML=h+":"+m+":"+s;
        time--;
    }
    setInterval("showTime()",10);

　　

示例5：鼠标事件，让图片移动到鼠标点击的位置（扩展）

鼠标坐标：e.clientX , e.clientY

图片位置：img.offsetLeft , img.offsetTop

方法一：在body中插入图片

<img src="../imgs/1.png" style="width:100px; position:absolute;left:0px;top:0px;" id="it"/>

　　js代码：

 let x=0,y=0;
 function move(e){
  e = e.event || window.event;
  let x1 = e.clientX;
  let y1 = e.clientY;
  let img = document.getElementById("it");
  let a = setInterval(function setInt(){
   if(x==x1 && y==y1){
    clearTimeout(a);
   }else if(x<x1){
    x++;
   }else if (x>x1){
    x--;
   }
   if(y<y1){
    y++;
   }else if (y>y1){
    y--;
   }
   img.style.left = x + "px";
   img.style.top = y + "px";
  }
  ,0.1);
  
 }
 document.onclick = move;

　　方法二：在css中使用transition属性；

 img{
  transition: 2s;
 }

　　js代码：

 let x=0,y=0;
 function move(e){
  e = e.event || window.event;
  x = e.clientX;
  y = e.clientY;
  let img = document.getElementById("it");
  img.style.left = x + "px";
  img.style.top = y + "px";
 }
 document.onclick = move;