JS Clock - есть ли более элегантный способ написать этот код?

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. A <section> совершенно не там, вы должны просто использовать <div>.