JS 시계 -이 코드를 작성하는 좀 더 우아한 방법이 있습니까?

Question

그래서 날짜와 시간을 표시하는이 시계를 만들었습니다. 이 코드를 작성하는 좀 더 우아한 방법이 있습니다. 왜냐하면 어떤 이유로 든 내가 원하는 코드를 수행하기는하지만 어지러운 것처럼 보이기 때문입니다. http://jsfiddle.net/vkramer/X4PMg/

Answer 1

예 :

덕분에 여기

는 코드입니다. 이제 거의 최소화 된 CSS는 무시하십시오. JavaScript에는 배열 리터럴이 있습니다. 그것들을 사용해야합니다. 그래서이 :

var showClock = function(){ 
    var now = new Date(); 
    var hours = now.getHours(); 
    var minutes = now.getMinutes(); 
    var seconds = now.getSeconds(); 

    if (hours < 10){ 
    hours = "0" + hours; 
    } 
    if (minutes < 10){ 
    minutes = "0" + minutes; 
    } 
    if (seconds < 10){ 
    seconds = "0" + seconds; 
    } 
    document.getElementById("hours").innerHTML = hours; 
    document.getElementById("minutes").innerHTML = minutes; 
    document.getElementById("seconds").innerHTML = seconds; 


    setTimeout("showClock();", 100); 
}; 

var showDate = function(){ 
    var now = new Date(); 
    var d = now.getDay(); 
    var m = now.getMonth(); 
    var y = now.getFullYear(); 
    var dayOfMonth = now.getDate(); 

    var day_name = new Array(7); 
     day_name[0]="Sunday" 
     day_name[1]="Monday" 
     day_name[2]="Tuesday" 
     day_name[3]="Wednesday" 
     day_name[4]="Thursday" 
     day_name[5]="Friday" 
     day_name[6]="Saturday" 

    var month_name = new Array(11); 
     month_name[0] = "January" 
     month_name[1] = "February" 
     month_name[2] = "March" 
     month_name[3] = "April" 
     month_name[4] = "May" 
     month_name[5] = "June" 
     month_name[6] = "July" 
     month_name[7] = "August" 
     month_name[8] = "September" 
     month_name[9] = "October" 
     month_name[10] = "November" 
     month_name[11] = "December" 



    document.getElementById("day").innerHTML = day_name[now.getDay()]; 
    document.getElementById("month").innerHTML = month_name[now.getMonth()]; 
    document.getElementById("year").innerHTML = y; 
    document.getElementById("dayOf").innerHTML = dayOfMonth; 

} 
showClock(); 
showDate(); 

는이되다 :

var showClock = function() { 
    var now = new Date(); 
    var hours = now.getHours(); 
    var minutes = now.getMinutes(); 
    var seconds = now.getSeconds(); 

    if (hours < 10) { 
     hours = "0" + hours; 
    } 
    if (minutes < 10) { 
     minutes = "0" + minutes; 
    } 
    if (seconds < 10){ 
     seconds = "0" + seconds; 
    } 

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

    setTimeout("showClock();", 100); 
}; 

var showDate = function() { 
    var now = new Date(); 
    var d = now.getDay(); 
    var m = now.getMonth(); 
    var y = now.getFullYear(); 
    var dayOfMonth = now.getDate(); 

    var day_name = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; 

    var month_name = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; 


    document.getElementById("day").innerHTML = day_name[now.getDay()]; 
    document.getElementById("month").innerHTML = month_name[now.getMonth()]; 
    document.getElementById("year").innerHTML = y; 
    document.getElementById("dayOf").innerHTML = dayOfMonth; 
} 

showClock(); 
showDate(); 

그런 다음, setTimeout에 문자열을 전달하지 않았다. 변수를 사용하지 말고 변수를 사용하지 마십시오.

function showClock() { 
    var now = new Date(); 
    var hours = now.getHours(); 
    var minutes = now.getMinutes(); 
    var seconds = now.getSeconds(); 

    if(hours < 10) { 
     hours = "0" + hours; 
    } 

    if(minutes < 10) { 
     minutes = "0" + minutes; 
    } 

    if(seconds < 10) { 
     seconds = "0" + seconds; 
    } 

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

    setTimeout(showClock, 100); 
} 

function showDate() { 
    var now = new Date(); 

    var day_name = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; 
    var month_name = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; 

    document.getElementById("day").innerHTML = day_name[now.getDay()]; 
    document.getElementById("month").innerHTML = month_name[now.getMonth()]; 
    document.getElementById("year").innerHTML = now.getFullYear(); 
    document.getElementById("dayOf").innerHTML = now.getDate(); 
} 

showClock(); 
showDate(); 

다른 것들도 마찬가지지만 허용됩니다. 또한 HTML5를 사용하는 척하지 마십시오. <section>은 완전히 잘못되었으므로 <div>을 사용해야합니다.