시간이 마이너스로 시작되고 마지막 메시지가 계속 표시됩니다.

-2

사이트에 넣고 싶은 카운트 다운 타이머에 문제가 있습니다. 카운트 다운은 정상이며 모든 것이 정상이지만 타이머 끝에서 타이머를 지우고 종료 메시지 또는 콜백을 표시하는 대신 시간이 계속해서 읽히는 동안 측면 메시지가 표시됩니다. 부정.시간이 마이너스로 시작되고 마지막 메시지가 계속 표시됩니다.

누가 잘못되었는지 보여 줄 수 있습니까?


 
    // Set the date we're counting down to 
 
    var countDownDate = new Date("March 31, 2017 09:35:00 PM").getTime(); 
 
    // Update the count down every 1 second 
 
    
 
    var x = setInterval(function() { 
 
    
 
     // Get todays date and time 
 
     var now = new Date().getTime(); 
 
       
 
     // Find the distance between now an the count down date 
 
     var distance = countDownDate - now; 
 
     
 
     // Time calculations for days, hours, minutes and seconds 
 
     var days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
 
     var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
 
     var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
 
     var seconds = Math.floor((distance % (1000 * 60))/1000); 
 
     
 
       
 
     
 
     // Output the result in an element with id="demo" 
 
     
 
     document.getElementById("days").innerHTML = days; 
 
     document.getElementById("hours").innerHTML = hours; 
 
     document.getElementById("minutes").innerHTML = minutes; 
 
     document.getElementById("seconds").innerHTML = seconds; 
 
    \t 
 
    \t 
 
    \t 
 
     
 
     // If the count down is over, write some text 
 
    \t if (distance < 0) { 
 
      clearInterval(x); 
 
      document.getElementById("endmessage").innerHTML = "EXPIRED"; 
 
    \t \t 
 
     } 
 
     
 
    }, 1000);

body { 
 
    \t \t \t background: #f6f6f6; 
 
    \t \t } 
 
    
 
    \t \t .countdownContainer{ 
 
    \t \t \t position: absolute;; 
 
    \t \t \t top: 50%; 
 
    \t \t \t left: 50%; 
 
    \t \t \t transform : translateX(-50%) translateY(-50%); 
 
    \t \t \t text-align: center; 
 
    \t \t \t background: #ddd; 
 
    \t \t \t border: 1px solid #999; 
 
    \t \t \t padding: 10px; 
 
    \t \t \t box-shadow: 0 0 5px 3px #ccc; 
 
    \t \t } 
 
    
 
    \t \t .info { 
 
    \t \t \t font-size: 80px; 
 
    \t \t }

<!DOCTYPE HTML> 
 
    <html> 
 
    <head> 
 

 
    </head> 
 
    <body> 
 
    <table class="countdownContainer"> 
 
    \t \t \t <tr class="info"> 
 
    \t \t \t \t <td colspan="4">Countdown to April fool</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr class="info"> 
 
    \t \t \t \t <td id="days">00</td> 
 
    \t \t \t \t <td id="hours">00</td> 
 
    \t \t \t \t <td id="minutes">00</td> 
 
    \t \t \t \t <td id="seconds">00</td> 
 
    \t \t \t \t 
 
    \t \t \t \t <td id="endmessage"></td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td>Days</td> 
 
    \t \t \t \t <td>Hours</td> 
 
    \t \t \t \t <td>Minutes</td> 
 
    \t \t \t \t <td>Seconds</td> 
 
    \t \t \t </tr> 
 
    \t \t </table> 
 
    \t \t 
 
    <p id="demo"></p> 
 
    
 
    <script> 
 
     
 
    </script> 
 
    
 
    </body> 
 
    
 
     
 
    </html>

출처

2017-04-01 Amasiatu Valentine Chidozie

'긴급히 치료하십시오. '- 당신은 그 문구가 실제로 아무 것도 의미하지 않는다는 것을 깨닫습니다. 사실 좀 이상한 표정입니다. –

문제는 프로그램 작성을 마쳤다는 것입니다. – traktor53

[더 빠른 답변을 얻기 위해 어떤 상황에서 "긴급한"또는 다른 유사한 문구를 내 질문에 추가 할 수 있습니까?] (https://meta.stackoverflow.com/q/326569) - 요약하면 자원 봉사자를 대처하는 이상적인 방법이 아니며, 아마도 답을 얻는 데 비생산적입니다. 이 질문을 귀하의 질문에 추가하지 마십시오. – halfer

는 이미 4 월 1 일 아닌가요 :

이 내 코드? 3 월 31 일과 같이 이미 통과 된 날까지 카운트 다운 중입니까?

또한, 당신은, PM 필요 PM을 제거하고 단지/PM

<script> 

// Set the date we're counting down to 
var countDownDate = new Date("April 1, 2017 09:35:00").getTime(); 
// Update the count down every 1 second 

var x = setInterval(function() { 

    // Get todays date and time 
    var now = new Date().getTime(); 

    // Find the distance between now an the count down date 
    var distance = countDownDate - now; 

    // Time calculations for days, hours, minutes and seconds 
    var days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
    var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
    var seconds = Math.floor((distance % (1000 * 60))/1000); 



    // Output the result in an element with id="demo" 

    document.getElementById("days").innerHTML = days; 
    document.getElementById("hours").innerHTML = hours; 
    document.getElementById("minutes").innerHTML = minutes; 
    document.getElementById("seconds").innerHTML = seconds; 




    // If the count down is over, write some text 
    if (distance < 0) { 
     clearInterval(x); 
     document.getElementById("endmessage").innerHTML = "EXPIRED"; 

    } 

}, 1000); 

</script>

이 9시 35분, 오늘 카운트 다운 AM하지 등 09 또는 21이 없습니다.

출처

2017-04-01 06:29:19

@ 크리스티안이 당신의 관찰에 감사드립니다. 나는 aw3omely 작동 –

귀하의 코드를 일부 변경했습니다.

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<style type="text/css"> 
 
     body { 
 
      background: #f6f6f6; 
 
     } 
 

 
     .countdownContainer{ 
 
      position: absolute;; 
 
      top: 50%; 
 
      left: 50%; 
 
      transform : translateX(-50%) translateY(-50%); 
 
      text-align: center; 
 
      background: #ddd; 
 
      border: 1px solid #999; 
 
      padding: 10px; 
 
      box-shadow: 0 0 5px 3px #ccc; 
 
     } 
 

 
     .info { 
 
      font-size: 80px; 
 
     } 
 
     </style> 
 
</head> 
 
<body> 
 
<table class="countdownContainer"> 
 
      <tr class="info"> 
 
       <td colspan="4">Countdown to April fool</td> 
 
      </tr> 
 
      <tr class="info"> 
 
       <td id="days">00</td> 
 
       <td id="hours">00</td> 
 
       <td id="minutes">00</td> 
 
       <td id="seconds">00</td> 
 

 
       <td id="endmessage"></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Days</td> 
 
       <td>Hours</td> 
 
       <td>Minutes</td> 
 
       <td>Seconds</td> 
 
      </tr> 
 
     </table> 
 

 
<p id="demo"></p> 
 

 
<script> 
 

 
// Set the date we're counting down to 
 
var countDownDate = new Date("April 01, 2017 12:00:30 PM").getTime(); 
 
// Update the count down every 1 second 
 

 
var x = setInterval(function() { 
 

 
    // Get todays date and time 
 
    var now = new Date().getTime(); 
 

 
    // Find the distance between now an the count down date 
 
    var distance = countDownDate - now; 
 

 
    // Time calculations for days, hours, minutes and seconds 
 
    var days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
 
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
 
    var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
 
    var seconds = Math.floor((distance % (1000 * 60))/1000); 
 

 

 

 

 

 

 

 
    // If the count down is over, write some text 
 
    if (distance < 0) { 
 
     clearInterval(x); 
 
     document.getElementById("endmessage").innerHTML = "EXPIRED"; 
 

 
    } 
 
    else{ 
 
    // Output the result in an element with id="demo" 
 

 
    document.getElementById("days").innerHTML = days; 
 
    document.getElementById("hours").innerHTML = hours; 
 
    document.getElementById("minutes").innerHTML = minutes; 
 
    document.getElementById("seconds").innerHTML = seconds; 
 
    } 
 

 
}, 1000); 
 

 
</script> 
 

 
</body> 
 

 

 
</html>

카운트 다운이 인쇄 될 때마다

, 차이가 0이 그래서 IF의 다른 조건을 내 그 부분을 이동 더 이상 경우에만 실시 할 필요가 아래를 찾아주세요. 그에 따라 날짜를 조정하여 카운트 다운을 테스트하십시오.

출처

2017-04-01 06:33:53

감사합니다. 고마워. 감사합니다. 너를 빚 졌어. 감사합니다. 친절하게 생각합니다. –

기쁨으로. 내 대답을 정확하게 표시하고 친절하게 upvote 해주세요. –

시간이 마이너스로 시작되고 마지막 메시지가 계속 표시됩니다.

답변

관련 문제