登录
当前位置： 首页 > 编程笔记 >

javascript关于运动的各种问题经典总结

夏侯博
2023-03-14
本文向大家介绍javascript关于运动的各种问题经典总结，包括了javascript关于运动的各种问题经典总结的使用技巧和注意事项，需要的朋友参考一下

本文实例总结了javascript关于运动的各种问题。分享给大家供大家参考。具体如下：

一、JS运动的各种问题

问题一：

错误代码：

function startMove(){ 
 var timer=null; 
 var div1=document.getElementById("div1"); 
 if (div1.offsetLeft==300){ 
  clearInterval(timer); 
 }else{ 
  timer=setInterval(function(){ 
   div1.style.left=div1.offsetLeft+10+"px"; 
  },30) 
 } 
}

希望实现的功能：

打开定时器timer，让div1运动到300px，然后让div1停下即关掉定时器。

错误之处：

if语句错误，代码首先设置一个null定时器timer，然后如果div1的左边距为300px，则关掉定时器timer。否则一直运动。但是if并不是循环语句，if语句执行一次之后将不再执行。所以永远不会关闭定时器。

正确代码：

var timer=null; 
function startMove(){ 
 var div1=document.getElementById("div1"); 
 timer=setInterval(function(){ 
  if (div1.offsetLeft==300){ 
   clearInterval(timer); 
  } 
  div1.style.left=div1.offsetLeft+10+"px"; 
 },30) 
}

问题二:
错误代码：

function startMove(){ 
 var speed=1; 
 var timer=null; 
 var oDiv1=document.getElementById("div1"); 
 clearInterval(timer); 
 timer=setInterval(function(){ 
  if (oDiv1.offsetLeft>=300){ 
   clearInterval(timer); 
  }else{ 
   oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; 
  } 
 },30) 
}

希望实现的功能：

连续点击开始按钮，div1会加速，这是因为每当点击按钮一次，就会开启一个定时器，累积起来就会加速，所以要在开启定时器之前不管有没有定时器开启都要先关闭一次定时器。但是添加了关闭定时器的clearInterval方法之后，依然会加速。
错误之处：
将timer变量放在了startMove方法里面，相当于每点击一次按钮，就会执行一次startMove方法，生成了一个闭包，因此创建了一个局部timer，每一个闭包当中的timer并不会共享，所以还是相当于生成了点击次数的闭包timer。

正确代码：

var timer=null; 
function startMove(){ 
 var speed=1; 
 var oDiv1=document.getElementById("div1"); 
 clearInterval(timer); 
 timer=setInterval(function(){ 
  if (oDiv1.offsetLeft>=300){ 
   clearInterval(timer); 
  }else{ 
   oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; 
  } 
 },30) 
}

实现分享栏进出功能：
代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style type="text/css"> 
  #div1{ 
   width: 150px; 
   height: 200px; 
   background: burlywood; 
   position: absolute; 
   left: -150px; 
  } 
  span{ 
   width: 20px; 
   height: 60px; 
   position: absolute; 
   background: gold; 
   right: -20px; 
   top: 70px; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv1=document.getElementById("div1"); 
   oDiv1.onmouseover=function(){ 
    move(0); 
   }; 
   oDiv1.onmouseout=function(){ 
    move(-150); 
   }; 
  }; 
  var timer=null; 
  function move(target){ 
   var oDiv1=document.getElementById("div1"); 
   var speed=0; 
   if (oDiv1.offsetLeft<target){ 
    speed=10; 
   }else{ 
    speed=-10; 
   } 
   clearInterval(timer); 
   timer=setInterval(function(){ 
    if(oDiv1.offsetLeft==target){ 
     clearInterval(timer); 
    }else{ 
     oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; 
    } 
   },30); 
  } 
 </script> 
</head> 
<body> 
<div id="div1"> 
 <span id="span1">分享到</span> 
</div> 
</body> 
</html>

实现图片淡入淡出功能：
代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  #div1{ 
   width: 200px; 
   height: 200px; 
   background: red; 
   position: absolute; 
   filter: alpha(opacity:30); 
   opacity: 0.3; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv1=document.getElementById("div1"); 
   oDiv1.onmouseover=function(){ 
    move(100); 
   }; 
   oDiv1.onmouseout=function(){ 
    move(30); 
   }; 
  }; 
  var timer=null; 
  var alpha=30; 
  function move(target){ 
   var oDiv1=document.getElementById("div1"); 
   var speed=0; 
   clearInterval(timer); 
   if(alpha<target){ 
    speed=10; 
   }else{ 
    speed=-10; 
   } 
   timer=setInterval(function(){ 
    if (alpha==target){ 
     clearInterval(timer); 
    }else{ 
     alpha+=speed; 
     oDiv1.style.filter="alpha(opacity:"+alpha+")"; 
     oDiv1.style.opacity=alpha/100; 
    } 
   },30); 
  }; 
 </script> 
</head> 
<body> 
<div id="div1"> 
</div> 
</body> 
</html>

注意点：

1.因为在透明度上JavaScript并没有像左边距（offsetLeft）这样的属性。所以用一个alpha变量代替。
2.JavaScript代码中的行间透明度设置上需要考虑浏览器的兼容问题，ie浏览器设置方法为oDiv1.style.filter="aplha(opacity:"+aplha+")"；
  chrome和火狐为oDiv1.style.opacity=alpha/100。
实现滚动条事件：
代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style type="text/css"> 
  #div1{ 
   width: 100px; 
   height: 100px; 
   background: yellowgreen; 
   position: absolute; 
   bottom: 0px; 
   right: 0px; 
  } 
 </style> 
 <script> 
  window.onscroll=function(){ 
   var oDiv=document.getElementById("div1"); 
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 
   move(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop); 
  }; 
  var timer=null; 
  function move(target){ 
   var oDiv=document.getElementById("div1"); 
   clearInterval(timer); 
   timer=setInterval(function(){ 
    var speed=(target-oDiv.offsetTop)/10; 
    speed=speed>0?Math.ceil(speed):Math.floor(speed); 
    if (oDiv.offsetTop==target){ 
     clearInterval(timer); 
    }else{ 
     oDiv.style.top=oDiv.offsetTop+speed+'px'; 
    } 
   },30) 
  }; 
 </script> 
</head> 
<body style="height:2000px;"> 
<div id="div1"></div> 
</body> 
</html>

二、JS多物体运动的各种问题

问题一：

希望实现的功能：三个平行div自由的平行缩放。
代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  div{ 
   width: 100px; 
   height: 50px; 
   background: yellow; 
   margin: 10px; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv=document.getElementsByTagName('div'); 
   for (var i=0;i<oDiv.length;i++){ 
    oDiv[i].timer=null; 
    oDiv[i].onmouseover=function(){ 
     move(300,this); 
    }; 
    oDiv[i].onmouseout=function(){ 
     move(100,this); 
    }; 
   } 
  }; 
  function move(iTarget,oDiv){ 
   clearInterval(oDiv.timer); 
   oDiv.timer=setInterval(function(){ 
    var speed=(iTarget-oDiv.offsetWidth)/5; 
    speed=speed>0?Math.ceil(speed):Math.floor(speed); 
    if (iTarget==oDiv.offsetWidth){ 
     clearInterval(oDiv.timer); 
    }else{ 
     oDiv.style.width=oDiv.offsetWidth+speed+"px"; 
    } 
   },30); 
  } 
 </script> 
</head> 
<body> 
<div id="div1"></div> 
<div id="div2"></div> 
<div id="div3"></div> 
</body> 
</html>

注意事项：

多物体运动如果只是设置一个定时器（设置全局定时器）的话，那么三个div共用一个一个全局定时器，那么当一个div没有完成缩小动作的时候另一个div开启定时器执行伸展动作，由于定时器是全局的，那么上一个div的定时器将被覆盖即取消掉，故上一个定时器无法完全地昨晚缩小动作，解决办法是给每一个div设置一个属性timer。

问题二：

希望实现的功能：多图片的淡入淡出。
代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  div{ 
   width: 200px; 
   height: 200px; 
   margin: 10px; 
   background: yellow; 
   float: left; 
   filter: alpha(opacity:30); 
   opacity: 0.3; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv=document.getElementsByTagName('div'); 
   for(var i=0;i<oDiv.length;i++){ 
    oDiv[i].timer=null; 
    oDiv[i].alpha=30; 
    oDiv[i].onmouseover=function(){ 
     move(100,this); 
    }; 
    oDiv[i].onmouseout=function(){ 
     move(30,this); 
    }; 
   } 
  }; 
  function move(iTarget,obj){ 
   clearInterval(obj.timer); 
   obj.timer=setInterval(function(){ 
    var speed=(iTarget-obj.alpha)/30; 
    speed=speed>0?Math.ceil(speed):Math.floor(speed); 
    if (obj.alpha==iTarget){ 
     clearInterval(obj.timer); 
    }else{ 
     obj.alpha+=speed; 
     obj.style.filter="alpha(opacity:"+obj.alpha+")"; 
     obj.style.opacity=obj.alpha/100; 
    } 
   },30); 
  } 
 </script> 
</head> 
<body> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
</body> 
</html>

希望实现的功能：多物体不同方向的伸缩功能。

代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  div{ 
   width: 100px; 
   height: 100px; 
   margin: 10px; 
   background: yellow; 
   float: left; 
   border: 10px solid black; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv1=document.getElementById('div1'); 
   var oDiv2=document.getElementById('div2'); 
   oDiv1.timer=null; 
   oDiv2.timer=null; 
   oDiv1.onmouseover=function(){ 
    move(this,400,'height'); 
   }; 
   oDiv1.onmouseout=function(){ 
    move(this,100,'height'); 
   }; 
   oDiv2.onmouseover=function(){ 
    move(this,400,'width'); 
   }; 
   oDiv2.onmouseout=function(){ 
    move(this,100,'width'); 
   }; 
  }; 
  function getStyle(obj,name){ 
   if(obj.currentStyle){ 
    return obj.currentStyle[name]; 
   }else{ 
    return getComputedStyle(obj,false)[name]; 
   } 
  }; 
  function move(obj,iTarget,name){ 
   clearInterval(obj.timer); 
   obj.timer=setInterval(function(){ 
    var cur=parseInt(getStyle(obj,name)); 
    var speed=(iTarget-cur)/30; 
    speed=speed>0?Math.ceil(speed):Math.floor(speed); 
    if(cur==iTarget){ 
     clearInterval(obj.timer); 
    }else{ 
     obj.style[name]=cur+speed+"px"; 
    } 
   },30); 
  }; 
 </script> 
</head> 
<body> 
<div id="div1"></div> 
<div id="div2"></div> 
</body> 
</html>

注意事项：

1.offsetwidth所获得的并不只是物体的纯宽度，还有物体的变宽以及外边距。那么在obj.style.width=obj.offsetwidth-1+"px";这句中，本意是希望图片缩小以1px的速度匀速缩小，但是如果将边框的宽度设置为1px而非0px，那么offsetwidth的值其实是obj的width（注意：不是style.width即不是行间的width）+2，上面这句变成了obj.style.width=obj的width+2-1+“px”；图像反而增大了。解决的办法就是不用offsetwidth，而用obj的width。width通过getStyle方法获得。
2.getStyle方法得到的是string。需要用parseint强制转换成数字类型。

完整的运动框架：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  #div1{ 
   width: 200px; 
   height: 200px; 
   margin: 20px; 
   background: yellow; 
   border: 5px solid black; 
   filter: alpha(opacity:30); 
   opacity: 0.3; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var oDiv1=document.getElementById('div1'); 
   oDiv1.timer=null; 
   oDiv1.onmouseover=function(){ 
    move(this,100,'opacity'); 
   }; 
   oDiv1.onmouseout=function(){ 
    move(this,30,'opacity'); 
   }; 
  }; 
  function getStyle(obj,name){ 
   if(obj.currentStyle){ 
    return obj.currentStyle[name]; 
   }else{ 
    return getComputedStyle(obj,false)[name]; 
   } 
  }; 
  function move(obj,iTarget,name){ 
   clearInterval(obj.timer); 
   obj.timer=setInterval(function(){ 
    var cur=0; 
    if(name=='opacity'){ 
     cur=Math.round(parseFloat(getStyle(obj,name))*100); 
    }else{ 
     cur=parseInt(getStyle(obj,name)); 
    } 
    var speed=(iTarget-cur)/30; 
    speed=speed>0?Math.ceil(speed):Math.floor(speed); 
    if(cur==iTarget){ 
     clearInterval(obj.timer); 
    }else{ 
     if(name=='opacity'){ 
      obj.style.opacity=(cur+speed)/100; 
      obj.style.filter='alpha(opacity:'+cur+speed+')'; 
     }else{ 
      obj.style[name]=cur+speed+"px"; 
     } 
    } 
   },30); 
  }; 
 </script> 
</head> 
<body> 
<div id="div1"></div> 
</body> 
</html>

希望本文所述对大家的javascript程序设计有所帮助。

 类似资料：
  • 关于缓存的经典问题

    主要内容：1.缓存雪崩,2.缓存穿透,3.缓存击穿,4.数据不一致,5.数据并发竞争,6.热点key问题,7.BigKey问题1.缓存雪崩 指缓存同一时间大面积的失效，所以，后面的请求都会落到数据库上，造成数据库短时间内承受大量请求而崩掉。 解决方案： Redis 高可用，主从+哨兵，Redis cluster，避免全盘崩溃 本地 ehcache 缓存 + hystrix 限流&降级，避免 MySQL 被打死 缓存数据的过期时间设置随机，防止同一时间大量数据过期现象发生。 逻辑上永不过期给每一个

  • PHPBrew-安装的各种问题

    我正在尝试使用PHPBrew安装PHP5.4，但出现以下错误： 用 我的操作系统：

  • 各式各样的问题[已关闭]

    我有一个想法，就是在实现if/else时使用数组haves(question，ans)将答案与问题联系起来，以确保答案是正确的 这是解决这个问题的好方法吗？帮我plz

  • JavaScript中的各种操作符使用总结

    本文向大家介绍JavaScript中的各种操作符使用总结，包括了JavaScript中的各种操作符使用总结的使用技巧和注意事项，需要的朋友参考一下 一元操作符 只能操作一个值的操作符叫一元操作符。 一元操作符是ECMAScript中最简单的操作符。 1.递增和递减操作符 递增递减操作符直接借鉴C,而且各有两个版本:前置型和后置型。顾明思义，前置型应该让位于要操作的变量之前，而后置型应该位于要操作的

  • 总结几道关于Node.js的面试问题

    本文向大家介绍总结几道关于Node.js的面试问题，包括了总结几道关于Node.js的面试问题的使用技巧和注意事项，需要的朋友参考一下 什么是error-first的回调方式 Error-first回调方式用来同时传递error和data。将错误作为第一个参数，它就必须先检查看看有没有错误先。另外的参数就用来传递data了。 你是如何避免回调地狱的? 模块化 把回调函数分割成独立的函数 使用控制流

  • 关于使用js算总价的问题

    本文向大家介绍关于使用js算总价的问题，包括了关于使用js算总价的问题的使用技巧和注意事项，需要的朋友参考一下 昨天对接数据，发现有个商品总价需要计算，商品数量不定，商品价格不定，商品种类不定，有点蒙，想来想去想找到点简单的写法也没想到，最后提供一种简单的思路吧。 商品数量，商品价格先建立两个数组； 之后在新建一个数组放单个商品总价的数组； 之后获取到所有的商品数量，商品价格放入数组，两个数组进行

相关阅读

JavaScript中数组的各种操作的总结(必看篇)javascript刷新父页面的各种方法汇总JavaScript中的6种运算符总结全面总结Javascript对数组对象的各种操作关于INADDR_ANY的问题

相关文章

1.8 工程相关解析(各种文件，资源访问)关于找实习的总结对于今年数分岗一些问题的总结【面经集合】附总结|面试常见的⑩个问题【建议收藏】常被问到的经典Android面试题

相关问答

关于java包的问题关于Git流的问题关于分页的问题javascript - vue3关于elementuiPlus表头合并问题？javascript - 一个关于 for 和 onclick() 事件的问题?

相关工具

视图各种动画效果TableView的各种操作锤锤总动员冇问题常用16种视图切换动画

相关文档

Stack Overflow 关于 Python 的部分高分问题关于 Python 的面试题各种算法的 Python 实现方案VC 经典教程Android 百战经典
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.