자바스크립트 프롬프트 상자의 지연 프롬프트 코드에 대한 자세한 설명

프롬프트 상자 기능: 마우스가 아바타를 가리키면 정보 상자가 팝업됩니다. 마우스가 아바타를 벗어나면 정보 상자가 사라집니다. 정보 상자가 사라집니다.

기능 구현 아이디어:

1. 요소를 가져옵니다.
2. 마우스가 p1을 가리키면 p2가 표시됩니다.
3. 마우스가 p1을 떠날 때 p2가 0.5초 지연되어 사라지도록 하여 마우스를 p2로 이동할 시간을 줍니다.
4. 마우스가 p2를 가리키면 p2가 표시됩니다. p2가 사라지도록 3단계에서 setTimeout을 설정했기 때문에,clearTimeout()으로 setTimeout을 지워서 p2를 표시할 수 있습니다.
5. 마우스가 p2를 떠날 때 p2가 0.5초 지연되어 사라지도록 하여 마우스가 p1을 가리킬 시간을 확보합니다.
6. 2단계에서는 마우스 포인터를 p1로 설정했고 p2가 표시됩니다. 그러나 5단계에서 setTimeout을 설정하여 p2를 사라지게 하였으므로 2단계에서는 setTimeout을 지워서 p2를 표시하는 데 ClearTimeout()을 추가합니다.

JS 코드:

<script>
window.onload=function()
{
  var op1=document.getElementById(&#39;p1&#39;);
  var op2=document.getElementById(&#39;p2&#39;);
  time=null;
  op1.onmouseover=function()
  {
    clearTimeout(time);
    op2.style.display=&#39;block&#39;;  
  };
  op1.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
  op2.onmouseover=function()
  {
    clearTimeout(time);
  };
  op2.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
};
</script>

코드가 비슷하므로 다음과 같이 단순화할 수 있습니다.

<script>
window.onload=function()
{
  var op1=document.getElementById(&#39;p1&#39;);
  var op2=document.getElementById(&#39;p2&#39;);
  time=null;
  op2.onmouseover=op1.onmouseover=function()
  {
    clearTimeout(time);
    op2.style.display=&#39;block&#39;;  
  };
  op2.onmouseout=op1.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
};
</script>

HTML, CSS 코드:

<p id="p1"></p>
<p id="p2"></p>
<style>
#p1{float:left;margin-right:10px;width:50px;height:50px;background:black;}
#p2{display:none;float:left;width:200px;height:200px;background:#0CF;}
</style>

위 내용은 자바스크립트 프롬프트 상자의 지연 프롬프트 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!