前端---js（自学笔记29)定时调用应用1

冷不防 2022-12-22 08:41 139阅读 0赞

### **前提代码中所用到的知识** ###

--------------------

### **扩展：** ###

### **offsetleft：** ###

在不同的浏览器中其值不同，且与父元素的position属性（relative,absolute,fixed）有关。

现分以下几种情况说明：

在父元素均不设置position属性时，

在Chrome，opera和IE浏览器中offsetLeft是元素边框外侧到浏览器窗口内侧的距离且body.offsetLeft=0,

在firefox浏览器中offsetLeft是元素边框外侧到body内侧的距离body.offsetLeft=-边框宽度

当父元素设置position元素时又分为两种情况，

如果父元素时body且body设置了position属性，在Chrome和opera浏览器中offsetLeft是元素边框外侧到body边框外侧的距离，

在IE和fireForx浏览器中offsetLeft是元素边框外侧到body边框内侧的距离

如果父元素不是body元素且设置了position属性时，offsetLeft为元素边框外侧到父元素边框内侧的距离（各浏览器情况一致）。

--------------------

### window.getComputedStyle()  ###

链接：[https://www.runoob.com/w3cnote/window-getcomputedstyle-method.html][https_www.runoob.com_w3cnote_window-getcomputedstyle-method.html]，直接看这个菜鸟教程里的详细介绍就可以

<!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(){
    				
    				//获取box1
    				var box1 = document.getElementById("box1");
    				//获取btn01
    				var btn01 = document.getElementById("btn01");
    				
    				//定义一个变量，用来保存定时器的标识
    				var timer;
    				
    				//点击按钮以后，使box1向右移动（left值增大）
    				btn01.onclick = function(){
    					
    					//关闭上一个定时器
    					clearInterval(timer);
    					
    					//开启一个定时器，用来执行动画效果
    					timer = setInterval(function(){
    						
    						//获取box1的原来的left值
    						var oldValue = parseInt(getStyle(box1,"left"));
    						
    						//在旧值的基础上增加
    						var newValue = oldValue + 1;
    						
    						//判断newValue是否大于800
    						if(newValue > 800){
    							newValue = 800;
    						}
    						
    						//将新值设置给box1
    						box1.style.left = newValue + "px";
    						
    						//当元素移动到800px时，使其停止执行动画
    						if(newValue == 800){
    							//达到目标，关闭定时器
    							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>

![20201118170923739.gif][]

[https_www.runoob.com_w3cnote_window-getcomputedstyle-method.html]: https://www.runoob.com/w3cnote/window-getcomputedstyle-method.html
[20201118170923739.gif]: /images/20221120/35768c2e98b74ab28ccc2b7d7d8fbe01.png