Home > Article > Web Front-end > Summary of knowledge points related to JS sports (with elastic movement examples)_javascript skills

Summary of knowledge points related to JS sports (with elastic movement examples)_javascript skills

WBOYOriginal: 2016-05-16 15:21:131256browse

This article summarizes the knowledge points related to JS sports. Share it with everyone for your reference, the details are as follows:

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

2.document.title output frequency cannot be too high

3. Try to avoid writing decimals when writing JS, because the inside of the computer is simulated, not actually stored

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

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

The output result is true

4. When writing a program, think about the general first and then the specific. When writing a program, first eliminate the special and then write the general

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

5. For arrays, you can use either a for loop or a for..in loop. Because the for loop is more controllable, it is better to use a for loop

For objects (json), you can only use for..in loop

6. The performance of writing *{margin:0;padding:0;} in CSS is not very good

7. Layout conversion, first set the left and top values for each element, and then set absolute for each element position and clear the margin

8. There will be a pause when using UL to exercise in IE7. At this time, you can try using DIV

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

10. Acceleration, the farther away from the target, the greater the acceleration; the closer to the target, the smaller (iTarget-obj.offsetLeft)/50

11. A better combination of acceleration and friction is 5 and 0.7, i.e. iSpeed+=(iTarget-obj.offsetLeft)/5; iSpeed*=0.7;

12. When there is a problem with the program, think about why the problem occurred

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

14. Elastic motion stopping conditions: distance too close and speed too small

15. The analysis must be done carefully, because the style will automatically ignore decimals. Therefore, in order to prevent the missing decimals from adding up, you can set a variable to store it and then assign it to the style. obj.style.left=left+"px";

Attachment: JavaScript elastic movement example

Principle of motion: acceleration motion + deceleration motion + friction motion;

The code is as follows:

<!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>

For more content related to JavaScript motion effects, please view the special topic on this site: " Summary of JavaScript motion effects and techniques"

I hope this article will be helpful to everyone in JavaScript programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implementing setting as homepage and adding to favorites compatible with various browsers based on JavaScript code_javascript skillsNext article：Implementing setting as homepage and adding to favorites compatible with various browsers based on JavaScript code_javascript skills

See more

Summary of knowledge points related to JS sports (with elastic movement examples)_javascript skills

Related articles