javascript - 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>在那里完全错误，你应该只使用 a <div>。