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);

---

当然，您也可以只使用 updateClock() 的返回值来更新 DOM。通过这种方式，您将分离 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>