JavaScriptクロックが正しく表示されない

Question

私は自分のウェブページ上でJavaScriptクロックを更新しようとしています。私が抱えている問題は、値そのものが更新されている（私はalert(timeNow)を使って値を表示し、更新していることを確認しています）、ウェブサイト上の時計はそうではありません。私は何かが欠けていたかどうか、あるいは私がちょうど私ができないことを見つけたことがあったかどうか疑問に思っていました。私は、jQueryを使用してそれを行う方法があれば、私は通常のJavaScriptより少し良いことを理解しているので、私は好きです。

Javascriptを：

function updateClock() { 
 
    var thisDate = new Date(); 
 
    if (thisDate.getHours() > 11 && thisDate.getHours() != 0) { 
 
    var Hours = Math.abs(thisDate.getHours() - 12); 
 
    var AmPm = "PM" 
 
    } else { 
 
    var Hours = thisDate.getHours() 
 
    var AmPm = "AM" 
 
    } 
 

 
    if (thisDate.getMinutes() < 10) { 
 
    var Mins = "0" + thisDate.getMinutes(); 
 
    } else { 
 
    var Mins = thisDate.getMinutes(); 
 
    }; 
 

 
    var timeNow = thisDate.getDate() + "/" + (thisDate.getMonth() + 1) + "/" + thisDate.getFullYear() + " " + Hours + ":" + Mins + " " + AmPm; 
 
    return timeNow; 
 
}; 
 
setInterval(updateClock, 1000); 
 

 
$("span#time").append(updateClock());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="time"></span>

Answer 1

あなたは、このように更新された時間が反映されていない、updateClock関数の戻り値を消費していません。

あなたは、時間スパンのテキスト

使用

setInterval(function(){ 
    $("span#time").text(updateClock()); 
}, 1000); 

Answer 2

あなたが機能updateClock()に時間が戻ってきているを更新する必要があります。あなたが実際にやりたいことは、updateClock()の最後のDOMに設定することです。

function updateClock() { 
    var thisDate = new Date(); 
    if (thisDate.getHours() > 11 && thisDate.getHours() != 0) { 
     var Hours = Math.abs(thisDate.getHours() - 12); 
     var AmPm = "PM" 
    } else { 
     var Hours = thisDate.getHours() 
     var AmPm = "AM" 
    } 

    if (thisDate.getMinutes() < 10) { 
     var Mins = "0" + thisDate.getMinutes(); 
    } else { 
     var Mins = thisDate.getMinutes(); 
    }; 

    var timeNow = thisDate.getDate() + "/" + (thisDate.getMonth()+1) + "/" + thisDate.getFullYear() + " " + Hours + ":" + Mins + " " + AmPm; 
    $("span#time").text(timeNow); 
} 

setInterval(updateClock, 1000); 

---

あなたはもちろん、単にDOMを更新するupdateClock()の戻り値を使用できます。ここでは、更新の例です。このようにして、DOM操作とJavaScript時間計算を分離します。 @Satpalはこのように説明しました。

Answer 3

$(document).ready(function() 
 
{ 
 

 
      
 
      goforit(); 
 

 
}); 
 
    
 
var dayarray=new Array ("Sunday","Monday","Tuesday","Wednesday", 
 
          "Thursday","Friday","Saturday") 
 

 
      var montharray=new Array("January","February","March","April","May","June", 
 
          "July","August","September","October","November","December") 
 

 
      function getthedate() { 
 
       d = new Date(); 
 
       d.setUTCFullYear(2004); 
 
       d.setUTCMonth(1); 
 
       d.setUTCDate(29); 
 
       d.setUTCHours(2); 
 
       d.setUTCMinutes(45); 
 
       d.setUTCSeconds(26); 
 

 
      var mydate=new Date() 
 
      var year=mydate.getYear() 
 
      if (year < 1000) 
 
      year+=1900 
 
      var day=mydate.getDay() 
 
      var month=mydate.getMonth() 
 
      var daym=mydate.getDate() 
 
      if (daym<10) 
 
      daym="0"+daym 
 
      var hours=mydate.getHours() 
 
      var minutes=mydate.getMinutes() 
 
      var seconds=mydate.getSeconds() 
 
      var dn="" 
 
      if (hours>=12) 
 
      dn="" 
 
      if (hours>12){ 
 
      hours=hours-12 
 
      } 
 
      if (hours==0) 
 
      hours=12 
 
      if (minutes<=9) 
 
      minutes="0"+minutes 
 
      if (seconds<=9) 
 
      seconds="0"+seconds 
 
      //Hire change font size 
 
      var cdate="" 
 
       + mydate.toLocaleString() 
 
       +"" 
 

 
      if (document.all) 
 
      document.all.clock.innerHTML=cdate 
 
      else if (document.getElementById) 
 
      document.getElementById("clock").innerHTML=cdate 
 
      else 
 
      document.write(cdate) 
 
      } 
 
      if (!document.all&&!document.getElementById) 
 
      getthedate() 
 
      function goforit() 
 
      { 
 
      if (document.all||document.getElementById) 
 
      setInterval("getthedate()",1000) 
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<SPAN id=clock style="display:block"></SPAN>

Answer 4

setInterval(function() { 
 
    $("span#time").text(moment(new Date()).format('DD/M/YYYY LTS')); 
 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://momentjs.com/downloads/moment.js"></script> 
 
<span id="time"></span>