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。 A <section>是完全錯誤的，你應該只使用<div>。