当前位置：首页 > news >正文

js(BOM)基础：15、Navigator对象、History对象、Location对象、定时(器)调用、demo(定时器实现图形变化动画)

news 2025/11/15 10:48:06

javascript 的Navigator对象、History对象、Location对象、定时器调用、定时器实现图形变化动画：

Ⅰ、BOM 的 Navigator 对象：userAgent、ActiveXObject
- 其一、代码为：
- 其二、结果为：
Ⅱ、BOM 的 History 对象：length、back()、forward()、go()
- 其一、代码为：
- 其二、结果为：
Ⅲ、BOM 的 Location 对象：location、assign()、reload()、replace()
- 其一、代码为：
- 其二、结果为：
Ⅳ、定时(器)调用：
- 其一、调用过程的代码：setInterval()、clearInterval()
- 其二、结果为：
- 其三、延迟调用的代码：setTimeout()、clearTimeout()
- 其四、结果为：
Ⅴ、demo(定时器)：
- 其一、定时器实现自动切换图片的代码：setInterval()、clearInterval()
- 其二、待使用图片为：
- 其三、结果为：
- 其四、定时器解决div跟随鼠标卡顿的代码：
- 其五、结果为：
- 其六、定时器实现右移动画的代码：setInterval()、clearInterval()、getStyle()
- 其七、结果为：
- 其八、定时器实现左/右移动画的代码：setInterval()、clearInterval()、getStyle()、move()：
- 其九、结果为：
- 其十、定时器实现图形变化动画的代码：
- 其十一、集成 move 函数的 tools.js 代码：
- 其十二、结果为：
Ⅵ、小结：

Ⅰ、BOM 的 Navigator 对象：userAgent、ActiveXObject

其一、代码为：


<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript">/** BOM* 	- 浏览器对象模型* 	- BOM 可以使我们通过 JS 来操作浏览器* 	- 在 BOM 中为我们提供了一组对象，用来完成对浏览器的操作* * 	- BOM 对象* 		Window* 			- 代表的是整个浏览器的窗口，同时 window 也是网页中的全局对象* 		Navigator* 			- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器* 		Location* 			- 代表当前浏览器的地址栏信息，通过 Location 可以获取地址栏信息，或者操作浏览器跳转页面* 		History* 			- 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录* 				由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页* 				而且该操作只在当次访问时有效* 		Screen* 			- 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息* * * 		这些 BOM 对象在浏览器中都是作为 window 对象的属性保存的，* 			可以通过 window 对象来使用，也可以直接使用* * 		*/// console.log(navigator);// Navigator {vendorSub: '', productSub: '20030107', vendor: 'Google Inc.', maxTouchPoints: 0, scheduling: Scheduling, …}(即：Navigator 对象)// console.log(location);// Location {ancestorOrigins: DOMStringList, href: 'http://127.0.0.1:5502/day17(%E5%90%ABBOM)/01.BOM.html', origin: 'http://127.0.0.1:5502', protocol: 'http:', host: '127.0.0.1:5502', …}// 											// (即：Location 对象)// console.log(history);// History {length: 1, scrollRestoration: 'auto', state: null}(即：History 对象)/** Navigator* 	- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器* 	- 由于历史原因，Navigator 对象中的大部分属性都已经不能帮助我们识别浏览器了(比如：appName 属性就不能再用来区分或识别浏览器)* 	- 一般我们只会使用 userAgent 来判断浏览器的信息，* 		userAgent 是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，* 		不同的浏览器会有不同的 userAgent* * 火狐的 userAgent* 	Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0* * Chrome 的 userAgent*  Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36* * IE8* 	Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)* * IE9* 	Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)* * IE10* 	Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)* * IE11* 	Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko* 	- 在 IE11 中已经将微软和 IE 相关的标识都已经去除了，所以我们基本已经不能通过 UserAgent 来识别一个浏览器是否是 IE 了*///alert(navigator.appName);var ua = navigator.userAgent;console.log(ua);// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36(注意：此时是 Chrome 浏览器的输出)if(/firefox/i.test(ua)){//此时的 i 表示：忽略大小写;// alert("你是火狐！！！");console.log("你是火狐！！！");}else if(/chrome/i.test(ua)){// alert("你是Chrome");console.log("你是Chrome");// 输出：你是Chrome(因为：此时的浏览器是 Chrome 浏览器)}else if(/msie/i.test(ua)){// alert("你是IE浏览器~~~");console.log("你是IE浏览器~~~");}else if("ActiveXObject" in window){//检查在 window 对象中是否包含 ActiveXObject 属性;//注意：在 IE11 中并不能通过 if(window.ActiveXObject) 来判断在 window 中是否存在 ActiveXObject 属性，因为 IE11　做了特别处理；// alert("你是IE11，枪毙了你~~~");console.log("你是IE11，枪毙了你~~~");}/** 如果通过 UserAgent 不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息* 比如：ActiveXObject(再如：currentStyle、attachEvent 等对象，其实在 ie 中 ActiveXObject 是函数)*/// if("ActiveXObject" in window){// 	alert("你是IE，我已经抓住你了~~~");// 	console.log("你是IE，我已经抓住你了~~~");// }else{// 	alert("你不是IE~~~");// 	console.log("你不是IE~~~");// 你不是IE~~~(即：在 Chrome 浏览器的情况下，此时并不是 IE)// }// alert("ActiveXObject" in window);// console.log("ActiveXObject" in window);// false(即：在 Chrome 浏览器的情况下，此时的输出结果为：false)</script></head><body></body>
</html>

其二、结果为：

// 一进入页面后的控制台：

在这里插入图片描述

Ⅱ、BOM 的 History 对象：length、back()、forward()、go()

其一、代码为：


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">/** History* 	- 对象可以用来操作浏览器向前或向后翻页*/window.onload = function(){//获取按钮对象var btn = document.getElementById("btn");btn.onclick = function(){/** length* 	- 属性，可以获取到当次访问的链接数量(即：表示访问到该页面时是第几个链接数量(即：是第几个页面))，只是当次的，一关闭就重新计数;*///alert(history.length);// console.log(history.length);// 1/2(即：是一个动态值，第一进入页面后此时的返回值为1，跳转到其它页面返回后此时的返回值为2)/** back()* 	- 可以用来回退到上一个页面，作用和浏览器的回退按钮一样*/// history.back();/** forward()* 	- 可以跳转下一个页面，作用和浏览器的前进按钮一样*/// history.forward();/** go()* 	- 可以用来跳转到指定的页面* 	- 它需要一个整数作为参数* 		1:表示向前跳转一个页面 相当于	forward()* 		2:表示向前跳转两个页面* 		-1:表示向后跳转一个页面* 		-2:表示向后跳转两个页面*/history.go(-2);};};</script></head><body><button id="btn">点我一下</button><h1>History</h1><a href="01.BOM.html">去BOM</a></body>
</html>

其二、结果为：

// 一进入页面后的控制台：

在这里插入图片描述

Ⅲ、BOM 的 Location 对象：location、assign()、reload()、replace()

其一、代码为：


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">/** Location* 	- 该对象中封装了浏览器的地址栏的信息*/window.onload = function(){//获取按钮对象var btn = document.getElementById("btn");btn.onclick = function(){//如果直接打印 location，则可以获取到地址栏的信息（当前页面的完整路径）// alert(location);// console.log(location);// Location {ancestorOrigins: DOMStringList, href: 'http://127.0.0.1:5502/day17(%E5%90%ABBOM)/03.Location.html', origin: 'http://127.0.0.1:5502', protocol: 'http:', host: '127.0.0.1:5502', …}//                       // 即：输出 location 对象的值;/** 如果直接将 location 属性修改为一个完整的路径，或相对路径* 	则我们页面会自动跳转到该路径，并且会生成相应的历史记录(注意：此时是有历史记录的)*/// location = "http://www.baidu.com";location = "01.BOM.html";/** assign()* 	- 用来跳转到其他的页面，作用和直接修改 location 一样(注意：此时也是有历史记录的)*/// location.assign("http://www.baidu.com");/** reload()* 	- 用于重新加载当前页面，作用和刷新按钮一样* 	- 如果在方法中传递一个 true，作为参数，则会强制清空缓存刷新页面*/// location.reload(true);/** replace()* 	- 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面* 		不会生成历史记录，不能使用回退按钮回退(注意：此时没有历史记录)*/// location.replace("01.BOM.html");};};</script></head><body><button id="btn">点我一下</button><h1>Location</h1><input type="text" /><a href="01.BOM.html">去BOM</a></body>
</html>

其二、结果为：

// 一进入页面后的控制台：

在这里插入图片描述

Ⅳ、定时(器)调用：

其一、调用过程的代码：setInterval()、clearInterval()


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){//获取 countvar count = document.getElementById("count");//使 count 中的内容，自动切换/** JS 的程序的执行速度是非常非常快的* 	如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用*//*for(var i=0 ; i<10000 ; i++){count.innerHTML = i;alert("hello");//alert()的特点：一执行 alert() 程序就会被暂停，然后点击后再继续执行程序(注意：通过 alert 实现定时是不现实的);}*//** setInterval()* 	- 定时调用* 	- 可以将一个函数，每隔一段时间执行一次* 	- 参数：* 		1.回调函数，该函数会每隔一段时间被调用一次* 		2.每次调用间隔的时间，单位是毫秒* * 	- 返回值：* 		返回一个 Number 类型的数据* 		这个数字用来作为定时器的唯一标识*/var num = 1;var timer = setInterval(function(){count.innerHTML = num++;if(num == 11){//关闭定时器clearInterval(timer);}},1000);console.log(timer);// 输出值为：1(即：唯一标识)//clearInterval() 可以用来关闭一个定时器//方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器//clearInterval(timer);};</script></head><body><h1 id="count"></h1></body>
</html>

其二、结果为：

// 一进入页面后的控制台：

在这里插入图片描述

// 稍等10s页面后的控制台(页面展示的值是动态的)：

在这里插入图片描述

其三、延迟调用的代码：setTimeout()、clearTimeout()


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){var num = 1;//开启一个定时器// setInterval(function(){// 	console.log(num++);// },3000);/** 延时调用，* 	延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次* * 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次* * 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择*/var timer = setTimeout(function(){console.log(num++);},3000);//使用 clearTimeout() 来关闭一个延时调用// clearTimeout(timer);// 此时就会出现在 setTimeout 未执行的情况下，就会被关闭(即：控制台不会再输出值)}</script></head><body></body>
</html>

其四、结果为：

// 一进入页面后的控制台：

在这里插入图片描述

Ⅴ、demo(定时器)：

其一、定时器实现自动切换图片的代码：setInterval()、clearInterval()


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){/** 使图片可以自动切换*///获取 img 标签var img1 = document.getElementById("img1");//创建一个数组来保存图片的路径var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];//创建一个变量，用来保存当前图片的索引var index = 0;//定义一个变量，用来保存定时器的标识var timer;//为 btn01 绑定一个单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){/**  目前，我们每点击一次按钮，就会开启一个定时器，(即：若同时开了 10 个定时器，就等于 10 个定时器同时切换图片，几乎等同切换一次需用 1/10 秒)* 	点击多次就会开启多个定时器，这就导致图片的切换速度过快，* 	并且我们只能关闭最后一次开启的定时器(因为每个定时器的返回值都是唯一的，且返回值 timer 一直再被刷新)*///在开启定时器之前，需要将当前元素上的其他定时器关闭(即：保证了同时只能有一个定时器，解决了开启多个定时器的问题)clearInterval(timer);/** 开启一个定时器，来自动切换图片*/timer = setInterval(function(){//使索引自增index++;//判断索引是否超过最大索引/*if(index >= imgArr.length){//则将 index 设置为 0index = 0;}*/index %= imgArr.length;//核心点：5 % 5 = 0//修改 img1 的 src 属性img1.src = imgArr[index];},1000);};//为 btn02 绑定一个单击响应函数var btn02 = document.getElementById("btn02");btn02.onclick = function(){//点击按钮以后，停止图片的自动切换，关闭定时器/** clearInterval() 可以接收任意参数(该参数也可能是 null、undefined 等)，* 	如果参数是一个有效的定时器的标识，则停止对应的定时器* 	如果参数不是一个有效的标识，则什么也不做*/clearInterval(timer);};};</script></head><body><img id="img1" src="img/1.jpg"/><br /><br /><button id="btn01">开始</button><button id="btn02">停止</button></body>
</html>

其二、待使用图片为：

在这里插入图片描述

其三、结果为：

// 一进入页面后的控制台：

在这里插入图片描述
// 点击开始后页面开始动态切换，而点击停止后切换才结束：

在这里插入图片描述

其四、定时器解决div跟随鼠标卡顿的代码：


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;position: absolute;}</style><script type="text/javascript">//使 div 可以根据不同的方向键向不同的方向移动/** 按左键，div 向左移* 按右键，div 向右移* 按上键，div 向上移* 按下键，div 向下移* 。。。*/window.onload = function(){//定义一个变量，来表示移动的速度var speed = 10;//创建一个变量表示方向//通过修改 dir 来影响移动的方向var dir = 0;//开启一个定时器，来控制 div 的移动(定时器只控制 div 移动而不控制方向，而 dir 只控制 div 的方向，因此解决了卡顿的问题)setInterval(function(){/** 37 左* 38 上* 39 右* 40 下*/switch(dir){case 37://alert("向左"); left值减小box1.style.left = box1.offsetLeft - speed + "px";break;case 39://alert("向右");box1.style.left = box1.offsetLeft + speed + "px";break;case 38://alert("向上");box1.style.top = box1.offsetTop - speed + "px";break;case 40://alert("向下");box1.style.top = box1.offsetTop + speed + "px";break;}},30);//为 document 绑定一个按键按下的事件document.onkeydown = function(event){event = event || window.event;//当用户按了 ctrl 以后，速度加快if(event.ctrlKey){speed = 500;}else{speed = 10;}//使 dir 等于按键的值dir = event.keyCode;};//当按键松开时，div 不再移动document.onkeyup = function(){//设置方向为 0dir = 0;};};</script></head><body><div id="box1"></div></body>
</html>

其五、结果为：

// 一进入页面后(该 div 是矩形且跟随鼠标移动)：

在这里插入图片描述

其六、定时器实现右移动画的代码：setInterval()、clearInterval()、getStyle()


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/* 作用：清除默认样式 */*{margin: 0;padding: 0;}#box1{width: 100px;height: 100px;background-color: red;position: absolute;left: 0;/* 解决兼容性问题(兼容 IE)：指定 left 值为 0 后，此时在 IE 浏览器上默认获取 left 的值就不再是 auto 了*//* 而除了 IE 之外的浏览器，即便没有设置 left 的值，那么默认获取 left 的值也是 0，因此其不存在兼容性问题 */}</style><script type="text/javascript">window.onload = function(){//获取 box1var box1 = document.getElementById("box1");//获取 btn01var btn01 = document.getElementById("btn01");//定义一个变量，用来保存定时器的标识var timer;//点击按钮以后，使 box1 向右移动（left 值增大）btn01.onclick = function(){//关闭上一个定时器clearInterval(timer);//解决：因重复触发 onclick 事件而开启多个定时器的问题;//注意：此时就算 timer 初始值是 undefined，也不影响 clearInterval(timer) 的操作;//开启一个定时器，用来执行动画效果timer = setInterval(function(){//获取 box1 的原来的 left 值var oldValue = parseInt(getStyle(box1,"left"));//parseInt() 的作用：提取出合法的数字便于计算;console.log(getStyle(box1,"left"));// 是一个动态值(即：随着定时器的执行该值一直在变化中)//在旧值的基础上增加var newValue = oldValue + 1;//判断 newValue 是否大于800if(newValue > 800){//想要停在 800px 的线上，而每次添加的总值和不一定刚好是 800，因此添加了一个判断和赋值; newValue = 800;}//将新值设置给 box1box1.style.left = newValue + "px";//当元素移动到 800px 时，使其停止执行动画if(newValue == 800){//此时不能直接设置为 newValue >= 800 的原因：newValue 在大于 800 的情况下，不能刚好停到 800px 的线上;//达到目标，关闭定时器clearInterval(timer);}},30);};};/** 定义一个函数，用来获取指定元素的当前的样式* 参数：* 		obj 要获取样式的元素* 		name 要获取的样式名*/function getStyle(obj , name){if(window.getComputedStyle){//正常浏览器的方式，具有 getComputedStyle() 方法return getComputedStyle(obj , null)[name];}else{//IE8 的方式，没有 getComputedStyle() 方法return obj.currentStyle[name];}}</script></head><body><button id="btn01">点击按钮以后box1向右移动</button><br /><br /><div id="box1"></div><div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div></body>
</html>

其七、结果为：

// 一进入页面后的控制台：

在这里插入图片描述

// 点击 点击按钮以后box1向右移动页面后的控制台：

在这里插入图片描述

其八、定时器实现左/右移动画的代码：setInterval()、clearInterval()、getStyle()、move()：


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#box1{width: 100px;height: 100px;background-color: red;position: absolute;left: 0;}</style><script type="text/javascript">window.onload = function(){//获取 box1var box1 = document.getElementById("box1");//获取 btn01var btn01 = document.getElementById("btn01");//获取 btn02var btn02 = document.getElementById("btn02");//点击按钮以后，使 box1 向右移动（left 值增大）btn01.onclick = function(){move(box1 , 800 , 10);};//点击按钮以后，使 box1 向左移动（left 值减小）btn02.onclick = function(){move(box1 , 0 , 10);};};//定义一个变量，用来保存定时器的标识var timer;//尝试创建一个可以执行简单动画的函数/** 参数：* 	obj: 要执行动画的对象* 	target: 执行动画的目标位置* 	speed: 移动的速度(正数向右移动，负数向左移动)*/function move(obj , target ,speed){//关闭上一个定时器clearInterval(timer);//获取元素目前的位置var current = parseInt(getStyle(obj,"left"));//判断速度的正负值//如果从 0 向 800 移动，则 speed 为正//如果从 800 向 0 移动，则 speed 为负if(current > target){//此时速度应为负值speed = -speed;}//开启一个定时器，用来执行动画效果timer = setInterval(function(){//获取 box1 的原来的 left 值var oldValue = parseInt(getStyle(obj,"left"));//在旧值的基础上增加var newValue = oldValue + speed;//判断 newValue 是否大于 800//从 800 向 0 移动//向左移动时，需要判断 newValue 是否小于 target//向右移动时，需要判断 newValue 是否大于 targetif((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){newValue = target;}//将新值设置给 box1obj.style.left = newValue + "px";//当元素移动到 0px 时，使其停止执行动画if(newValue == target){//达到目标，关闭定时器clearInterval(timer);}},30);}/** 定义一个函数，用来获取指定元素的当前的样式* 参数：* 		obj 要获取样式的元素* 		name 要获取的样式名*/function getStyle(obj , name){if(window.getComputedStyle){//正常浏览器的方式，具有 getComputedStyle() 方法return getComputedStyle(obj , null)[name];}else{//IE8 的方式，没有 getComputedStyle() 方法return obj.currentStyle[name];}}</script></head><body><button id="btn01">点击按钮以后box1向右移动</button><button id="btn02">点击按钮以后box1向左移动</button><br /><br /><div id="box1"></div><div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div></body>
</html>

其九、结果为：

// 一进入页面后：

在这里插入图片描述

// 点击 点击按钮以后box1向右移动页面后(即：往右移动)：

在这里插入图片描述

// 点击 点击按钮以后box1向左移动页面后(即：往左移动)：

在这里插入图片描述

其十、定时器实现图形变化动画的代码：


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#box1{width: 100px;height: 100px;background-color: red;position: absolute;left: 0;}#box2{width: 100px;height: 100px;background-color: yellow;position: absolute;left: 0;top: 200px;}</style><script type="text/javascript" src="js/tools.js"></script><script type="text/javascript">window.onload = function(){//获取 box1var box1 = document.getElementById("box1");//获取 btn01var btn01 = document.getElementById("btn01");//获取 btn02var btn02 = document.getElementById("btn02");//点击按钮以后，使 box1 向右移动（left 值增大）btn01.onclick = function(){move(box1 ,"left", 800 , 20);};//点击按钮以后，使 box1 向左移动（left 值减小）btn02.onclick = function(){move(box1 ,"left", 0 , 10);};//获取 btn03var btn03 = document.getElementById("btn03");btn03.onclick = function(){move(box2 , "left",800 , 10);};//测试按钮var btn04 = document.getElementById("btn04");btn04.onclick = function(){//move(box2 ,"width", 800 , 10);//move(box2 ,"top", 800 , 10);//move(box2 ,"height", 800 , 10);move(box2 , "width" , 800 , 10 , function(){//由于在 tools.js 中的代码设定，默认 width 执行结束后，就会执行 function 函数;move(box2 , "height" , 400 , 10 , function(){move(box2 , "top" , 0 , 10 , function(){move(box2 , "width" , 100 , 10 , function(){});});});});};};//定义一个变量，用来保存定时器的标识/** 目前我们的定时器的标识由全局变量 timer 保存，* 	所有的执行正在执行的定时器都在这个变量中保存*  (存在的问题：由于是同一个 timer，故不能同时开启多个动画对象(即：同时只能有一个对象在执行))* 因此需要在 tool.js 内调用每一个对象的 timer(即：定时器标识)，从而能保证多个对象同时执行;*///var timer;</script></head><body><button id="btn01">点击按钮以后box1向右移动</button><button id="btn02">点击按钮以后box1向左移动</button><button id="btn03">点击按钮以后box2向右移动</button><button id="btn04">测试按钮</button><br /><br /><div id="box1"></div><div id="box2"></div><div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div></body>
</html>

其十一、集成 move 函数的 tools.js 代码：


//尝试创建一个可以执行简单动画的函数
/** 参数：* 	obj: 要执行动画的对象* 	attr: 要执行动画的样式，比如：left top width height* 	target: 执行动画的目标位置* 	speed: 移动的速度(正数向右移动，负数向左移动)*  callback: 回调函数，这个函数将会在动画执行完毕以后执行*/
function move(obj, attr, target, speed, callback) {//关闭上一个定时器clearInterval(obj.timer);//获取元素目前的位置var current = parseInt(getStyle(obj, attr));//判断速度的正负值//如果从 0 向 800 移动，则 speed 为正//如果从 800 向 0 移动，则 speed 为负if(current > target) {//此时速度应为负值speed = -speed;}//开启一个定时器，用来执行动画效果//向执行动画的对象中添加一个 timer 属性，用来保存它自己的定时器的标识obj.timer = setInterval(function() {//获取 box1 的原来的 left 值var oldValue = parseInt(getStyle(obj, attr));//在旧值的基础上增加var newValue = oldValue + speed;//判断 newValue 是否大于 800//从 800 向 0 移动//向左移动时，需要判断 newValue 是否小于 target//向右移动时，需要判断 newValue 是否大于 targetif((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {newValue = target;}//将新值设置给 box1obj.style[attr] = newValue + "px";//注意：attr 是个变量，因此需要采用 style[attr] 的方式来获取 attr 对应变量的值;//当元素移动到 0px 时，使其停止执行动画if(newValue == target) {//达到目标，关闭定时器clearInterval(obj.timer);//动画执行完毕，调用回调函数callback && callback();//兼容性操作;}}, 30);
}/** 定义一个函数，用来获取指定元素的当前的样式* 参数：* 		obj 要获取样式的元素* 		name 要获取的样式名*/
function getStyle(obj, name) {if(window.getComputedStyle) {//正常浏览器的方式，具有 getComputedStyle() 方法return getComputedStyle(obj, null)[name];} else {//IE8 的方式，没有 getComputedStyle() 方法return obj.currentStyle[name];}}

其十二、结果为：

// 一进入页面后：

在这里插入图片描述

// 点击 点击按钮以后box2向右移动页面后(即：往右移动)：

在这里插入图片描述

// 点击 点击按钮以后box1向右移动 和 点击按钮以后box2向右移动页面后(都往右移动)：

在这里插入图片描述

// 点击 测试按钮 页面后：width/height/top 等的变化

在这里插入图片描述

Ⅵ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482

查看全文

http://www.dtcms.com/a/610700.html