2020-7-13BOM对象

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

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;
 }