1. Everything in a multi-object motion frame cannot be shared

2.document.title output frequency should not be too high

3. Try to avoid writing decimals when writing js,Because the computer is all analog,Instead of actually storing

For example:0.07 * 100 is not 7 in js operation

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

The output is true

4. Think about general when writing a program,Think again special,Writing a program is,Exclude special,Then write general

if (special 1)
else if (Special 2)

5. Array can use both for loop and for..in loop, because for loop is more controllable, so it is better to use for loop.

Object (json) can only use for..in loop

6. In the CSS * {margin:0;padding:0;} write performance is not very good

7. Layout conversion,First set the left and top values ​​for each element. After all the settings are set, set absolute and margin for each element.

8.ie7 freezes when using ul for exercise,At this time, you can try with div

9. Consider the friction force factor ispeed * 0.95 (the size of the decimal depends on the friction force)

10. Acceleration, the greater the distance from the target, the greater the acceleration, the closer and smaller the target (itarget-obj.offsetleft)/50

11.The better combination of acceleration and friction is 5 and 0.7 ispeed +=(itarget-obj.offsetleft)/5;ispeed *=0.7;

12. When the program goes wrong,Think about why this is happening

13. Elastic movement cannot be used when the style cannot cross the boundary

14. Elastic motion stop conditions:too close, too low speed

15. Analysis must be onlooker analysis,Because styles automatically ignore decimals,Therefore, in order not to increase the missing decimal product,You can set a variable to store,Then assign styles. obj.style.left=left + "px";

Attachment:javascript elastic movement example

Movement principle:acceleration movement + deceleration movement + friction movement;

code show as below:

<! Doctype html>
<meta charset="utf-8">
<title>untitled document</title>
#div1 {width:100px;height:100px;background:red;position:absolute;left:0;top:50px;}
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);
<input type="button" value="movement" />
  • Previous Python regular expression learning guide
  • Next Substr_count () function in PHP to get the number of occurrences of a substring