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

试试这个...

＆＃13;

$(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)
            }

＆＃13;

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

＆＃13;

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>

JavaScript时钟无法正常显示

4 个答案: