새 메일 카운터 자바 스크립트

저는 작업중인 자바 스크립트 앱에 몇 가지 주요 문제점이 있습니다. 내 창을 닫힌 봉투로 열어 둔 다음 5 초 후에 열린 모서리의 모서리에 1 개의 작은 카운터가있는 열린 봉투로 바꿔야합니다. 봉투를 클릭하지 않으면 카운터가 5 초마다 계속 움직이기를 원합니다. 클릭하면 카운트를 다시 시작하겠습니다. 지금까지 나는 폐쇄 된 봉투 만 보여 주었다. 나는 새롭고 내가 뭘 잘못하고 있는지 전혀 모른다. 그래서 어떤 도움이 굉장 할 것이다!
내 HTML :새 메일 카운터 자바 스크립트

<!DOCTYPE html> 
<html> 
    <head> 
<script type="text/javascript" src="mail.js"></script> 
    </head> 
    <body> 
     <img id"closed" src="closed.png" onclick="resetTimer()"> 
     <span id="counter"></span> 
    </body> 
</html>

그리고 내 자바 스크립트 :

당신은 그 값이 당신의 카운터를 증가 카운터 범위를 설정해야

window.onload = function(){ 
    var counter = 0; 
    var timer = setInterval(
     function(){   
      counter++; 
      document.getElementById("demo").firstChild.nodeValue = counter; 
     }, 
     5000 
    );    

    function openEnvelope(){ 
     var img = document.getElementById("picture"); 
     if (counter > 1){ 
      img.src = "open.png" 
     } 
    } 
    open = setTimeout("open()", 1000); 

    function resetTimer(){ 
     clearInterval(timer); 
    } 
}

출처

2013-10-01 Anonymous

 var counter = 0; 
     //Create your timer (setTimeout will only run once, setInterval will start again once run. 
     //1000 = 1 second 
     var timer = setInterval(openEnvelope, 1000); 

     function openEnvelope() { 
      var img = document.getElementById("picture"); 
      var counterSpan = document.getElementById("counter"); 
      if (counter > 1) { 
       img.src = "open.png" 
       counterSpan.innerHTML = counter; 
      } 
      //Add 1 to Counter 
      counter++; 
     } 

     function resetTimer() { 
      clearInterval(timer); 
      counter = 0; 
     }

것은이 실행됩니다 당신의 openEnvelope은 매 초마다 작동하며 카운터 값이 1 이상이면 Img Source를로 설정합니다및 counter의 범위에 카운터 값이 있습니다. 엔벨로프를 클릭하면 타이머가 지워지고 카운터가 재설정됩니다.

그리고 당신의 HTML이 될 것입니다 :

여기

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript" src="mail.js"></script> 
    </head> 
    <body> 
     <img id"picture" src="closed.png" onclick="resetTimer()"> 
     <span id="counter"></span> 
    </body> 
</html>

은이 문제에 대한 JSFiddle 작업의 <head>에 <script></script> 태그에 자바 스크립트를 빈 페이지를 생성하고 바로 <body> 태그로 HTML을 복사하는 시도이다 귀하의 페이지.

출처

2013-10-01 09:22:22 Nunners

또 다른 문제는이 부분입니다 :'var img = document.getElementById ("picture");'. id가'picture' 인 요소가 없습니다. –

아, 고마워. 나는 그의 html을 수정했고 대답에 그것을 추가했다. – Nunners

의견을 보내 주셔서 감사합니다. 아직 카운터가없는 닫힌 봉투를 얻고 있습니다 ... –

새 메일 카운터 자바 스크립트

답변

관련 문제