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>は完全に間違っているので、を使用する必要があります<div>。