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;

  

 

 

 

posted @ 2020-07-13 19:28  马内过内马  阅读(3)  评论(0编辑  收藏