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>。