자바 스크립트에서 카운트 다운 시계 만들기

Question

자바 스크립트에서 카운트 다운 시계를 만들고 정확히 원하는 형식으로 지정하는 데 문제가 있습니다. 기본적으로 totalTime이라는 변수가 있습니다.이 변수는 초기에 카운트 다운이 실행될 총 시간 (초)으로 설정됩니다. 매초마다이 숫자는 1 씩 감소하며 페이지에 표시하기 위해 분과 초로 변환합니다.

위로 올라가고있는 것은 총 시간의 초기 값이 600 (10:00) 이상인 경우에만 앞에 0을 남겨 두는 것입니다. 따라서 totalTime을 600으로 설정하면 카운트 다운이 10:00, 09:59, 09:58 등으로 표시되기를 원합니다 (앞에 0이 표시됨). 그러나 totalTime을 300으로 설정하면 카운트 다운이 5:00, 4:59, 4:58 등으로 표시되기를 원합니다.

다른 말로하면 카운트 다운이 시작되는 시간을 기준으로 선행 0이 표시되어야합니다 off (totalTime의 초기 값), 이 아님 현재 남아있는 시간 (totalTime의 현재 값). 어떻게하면 좋을까요?

편집 : 여기에 내가 현재 가지고있는 코드입니다 : http://jsfiddle.net/JFYaq/

// Get the countdown element 
var countdown = document.getElementById("countdown"); 

// Set the total time in seconds 
var totalTime = 600; 

// Every second... 
var interval = setInterval(function(){ 
    // Update the time remaining 
    updateTime(); 

    // If time runs out, stop the countdown 
    if(totalTime == -1){ 
     clearInterval(interval); 
     return; 
    } 
}, 1000); 

// Display the countdown 
function displayTime(){ 
    // Determine the number of minutes and seconds remaining 
    var minutes = Math.floor(totalTime/60); 
    var seconds = totalTime % 60; 

    // Add a leading 0 to the number of seconds remaining if it's less than 10 
    if (seconds < 10){ 
     seconds = "0" + seconds; 
    } 

    // Split the number of minutes into two strings 
    var minutesString = minutes + ""; 
    var minutesChunks = minutesString.split(""); 

    // Split the number of seconds into two strings 
    var secondsString = seconds + ""; 
    var secondsChunks = secondsString.split(""); 

    // If the total time is 10 minutes or greater... 
    if (totalTime >= 600){ 
     // Add a leading 0 to the number of minutes remaining if it's less than 10 
     if (minutes < 10){ 
      minutes = "0" + minutes; 
     } 
     // Display the time remaining 
     countdown.innerHTML = "<span>" + minutesChunks[0] + "</span>" + "<span>" + minutesChunks[1] + "</span>" + ":" + "<span>" + secondsChunks[0] + "</span>" + "<span>" + secondsChunks[1] + "</span>"; 
    } 
    // If the total time is less than 10 minutes... 
    else { 
     // Display the time remaining without a leading 0 on the number of minutes 
     countdown.innerHTML = "<span>" + minutes + "</span>" + ":" + "<span>" + secondsChunks[0] + "</span>" + "<span>" + secondsChunks[1] + "</span>" 
    }   
} 

// Update the time remaining 
function updateTime(){ 
    displayTime(); 
    totalTime--; 
} 

// Start the countdown immediately on the initial pageload 
updateTime(); 

Answer 1

바이올린 : http://jsfiddle.net/JFYaq/1/

설명 :

가 접두사로 제로 필요한 경우, 다음과 같은 기능을 사용할 수 있습니다 :

function pad(n){ 
    return n > 9 ? "" + n : "0" + n; 
} 

참고 "" + n. pad(n) 함수는 항상 문자열 메서드를 적용하는 데 유용한 문자열을 반환합니다.

패딩은 항상 두 번째 카운터에서 사용해야합니다. 분 카운터를 들어, 변수에 원래 시간을 저장하고, 600 여부를 초과하는지 여부를 확인합니다

var original = 600; 
function padMinute(n){ 
    return original >= 600 && n < 9 ? "0" + n : "" + n; 
} 

---

이 코드에 관한 :

function displayTime(){ 
    var minutes = Math.floor(totalTime/60); 
    var seconds = totalTime % 60; 

    minutes = "<span>" + padMinute(minutes).split("").join("</span><span>") + "</span>"; 
    seconds = "<span>" + pad(seconds).split("").join("</span><span>") + "</span>"; 

    countdown.innerHTML = minutes + ":" + seconds; 
} 

.split("")는에 분할에게 문자열을 회전

문자 목록. .join("</span><span>")은 모든 문자 사이에 </span><span>을 추가하여 문자열 세트를 연결하는 데 사용됩니다. 전체 결과는 <span> 및 </span>과 결합되어 최종 HTML이 유효합니다.

실행 모델 :

1. padMinute(minutes)      "09" 
2.    .split("")     Array("0" , "9") 
3.     .join("</span><span>") 
              "0</span><span>9" 
4.    "<span>" + .. + "</span>" "<span>0</span><span>9<span>"