집 > 기사 > 웹 프론트엔드 > sports_javascript 기술과 관련된 다양한 문제에 대한 JavaScript 클래식 요약

sports_javascript 기술과 관련된 다양한 문제에 대한 JavaScript 클래식 요약

WBOY원래의: 2016-05-16 16:02:00965검색

이 기사의 예는 JavaScript의 스포츠와 관련된 다양한 문제를 요약합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

1. JS 운동의 다양한 이슈

질문 1:

오류 코드:

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) 
 } 
}

구현하려는 기능:

타이머를 열고 div1을 300px로 이동시킨 다음 div1을 중지하고 타이머를 끕니다.

오류:

if 문이 잘못되었습니다. 코드는 먼저 null 타이머를 설정한 다음 div1의 왼쪽 여백이 300px이면 타이머를 끕니다. 그렇지 않으면 계속 움직이세요. 그러나 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) 
}

질문 2:
오류 코드:

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 메소드를 추가한 후에도 여전히 속도가 빨라집니다.
오류:
startMove 메소드에 타이머 변수를 넣는 것은 버튼을 클릭할 때마다 startMove 메소드가 실행되고 클로저가 생성됨을 의미하므로 각 클로저의 타이머는 공유되지 않습니다. 이는 클릭 횟수에 대한 종료 타이머를 생성하는 것과 동일합니다.

올바른 코드:

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)과 같은 속성이 없기 때문입니다. 따라서 대신 알파 변수를 사용하십시오.
2. JavaScript 코드에서 라인 간 투명도를 설정할 때 브라우저 호환성 문제를 고려해야 합니다. IE 브라우저의 설정 방법은 oDiv1.style.filter="aplha(opacity:" aplha ")"; Chrome과 Firefox는 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&#63;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>

2. JS 다중 객체 이동의 다양한 문제

질문 1:

달성하고 싶은 기능: 세 개의 병렬 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&#63;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가 타이머를 시작하여 스트레칭을 수행합니다. action. 타이머는 전역이므로 이전 div의 타이머가 덮어쓰이거나 취소되므로 이전 타이머는 어젯밤에 작업을 완전히 줄일 수 없습니다. 해결책은 각 div에 대해 속성 타이머를 설정하는 것입니다.

질문 2:

달성하고 싶은 기능: 여러 장의 사진을 페이드 인 및 페이드 아웃합니다.

코드:

<!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&#63;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&#63;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의 균일한 속도로 이미지를 축소하는 것이지만 테두리 너비를 0px가 아닌 1px로 설정하면, 그러면 offsetwidth 값은 실제로는 obj의 너비입니다. (참고: style.width가 아닙니다. 즉 줄 사이의 너비가 아닙니다.) 2. 위 문장은 obj.style.width=obj의 너비가 됩니다. 2 -1 "px"; 대신 이미지가 증가합니다. 해결책은 offsetwidth를 사용하는 것이 아니라 obj의 너비를 사용하는 것입니다. 너비는 getStyle 메소드를 통해 얻습니다.

2. getStyle 메소드는 문자열을 가져옵니다. 숫자 유형으로 변환하려면 parsint를 사용해야 합니다.

완전한 모션 프레임워크:

<!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&#63;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 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：JavaScript 비생성자 상속다음 기사：JavaScript 비생성자 상속

sports_javascript 기술과 관련된 다양한 문제에 대한 JavaScript 클래식 요약

관련 기사