JS运动相关知识点小结(附弹性运动示例)

时间：2021-05-26

本文总结了JS运动相关知识点。分享给大家供大家参考，具体如下：

1.多物体运动框架所有东西都不能共用

2.document.title输出频率不能太高

3.在写JS时尽量避免写小数，因为计算机内部都是模拟的，而不是实际存储的

如：0.07*100 在JS运算里不是为7

var a=3;var b=3.00000000000000000001;alert(a=b);

输出的结果却是true

4.写程序思考时先思考一般，再思考特殊，写程序是，先排除特殊，然后写一般

if(特殊1){}else if(特殊2){}else{ 一般}

5.数组既可以用for 循环也可以用for..in循环，因为for循环比较可控 ，所以用for循环会比较的好

对象（json）的话只能用for..in循环

6.在CSS中*{margin:0;padding:0;}这样写性能并不怎么好

7.布局转换，先给每个元素设置left,top值 ，，全部设置好了以后再 给每个元素position设置absolute 并且margin清零

8.IE7中用UL进行运动时会顿卡，这时候可以用DIV试试看

9.考虑摩擦力因素 iSpeed*0.95(小数的大小取决于摩擦力的大小)

10. 加速度，离目标越远加速度越大 离目标越近越小（iTarget-obj.offsetLeft）/50

11.加速度和摩擦力比较好的组合是5和0.7 即iSpeed+=(iTarget-obj.offsetLeft)/5 ; iSpeed*=0.7;

12.当程序出问题的时候，思考为什么会出现这个问题

13.弹性运动在样式不能过界的时候不能用

14.弹性运动停止条件：距离过近 速度过小

15.分析要围观分析，因为样式会自动的忽略小数，因此，为了不让丢失的小数积少成多，可以设置一个变量来存储，然后赋给样式。 obj.style.left=left+"px";

附：JavaScript弹性运动实例

运动原理：加速运动+减速运动+摩擦运动；

代码如下：

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}</style><script>window.onload = function(){ var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, 300); };};var iSpeed = 0;var left = 0;function startMove(obj, iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ iSpeed += (iTarget - obj.offsetLeft)/5; iSpeed *= 0.7; left += iSpeed; if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ clearInterval(obj.timer); obj.style.left = iTarget + 'px'; }else{ obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30);}</script></head><body><input id="btn1" type="button" value="运动" /><div id="div1"></div><div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div></body></html>

更多关于JavaScript运动效果相关内容可查看本站专题：《JavaScript运动效果与技巧汇总》

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章