0

我通过 API 调用日期和时间，如下所示：

<?php $xml = simplexml_load_file("https://api.eveonline.com/server/ServerStatus.xml.aspx/"); ?>
<div class="server-time">
    <?php echo $xml->currentTime; ?>
</div>

这将在页面上显示这样的日期和时间：

2013-10-16 08:15:36

现在我希望这个时钟每秒滴答一次，时间甚至日期（如果用户访问该站点时它是午夜前几秒钟）值会相应地改变，就像您期望数字时钟工作一样。

我知道使用 JavaScript 可以做到这一点，但由于我是一个新手，所以我根本不知道该怎么做。

帮助将非常受欢迎！

4

2 回答 2

0

我不确定您是否希望它每秒从 api 获取时间，或者如果您希望它每秒增加一次，则从给定的 api 时间开始。在后一种情况下，您应该使用 setInterval：

function updateTime() {
    // assuming you are using jquery for DOM manipulation:
    var timestamp = $('.server-time').text();
    var date = new Date(timestamp);
    date.setSeconds(date.getSeconds() + 1);

    $('.server-time').text(date.toString());
}

setInterval(updateTime, 1000);

如果您不使用 jquery，只需使用 document.getElementById 或类似的东西：

将您的元素更改为：

<div id="server-time">

并使用以下代码段：

function updateTime() {
    // assuming you are using jquery for DOM manipulation:
    var timestamp = document.getElementById('server-time').innerHTML;
    var date = new Date(timestamp);
    date.setSeconds(date.getSeconds() + 1);

    document.getElementById('server-time').innerHTML = date.toString();
}
于 2013-10-16T09:47:05.070 回答
0

那里有很多 javascript 时钟，您甚至不必使用 API 来获取时间和日期！

function clock(id) {

    //Create a new Date object.
    oDate = new Date();

    //Get year (4 digits)
    var year = oDate.getFullYear();

    //Get month (0 - 11) - NOTE this is using indexes, so 0 = January.
    var month = oDate.getMonth();

    //Get day (1 - 31) - not using indexes.
    var day = oDate.getDate();

   //Get hours
   var hours = oDate.getHours();

   //Get minutes
   var minutes = oDate.getMinutes();

   //Get seconds
   var seconds = oDate.getSeconds();

   //Maybe create a function that adds leading zero's here

   var dateStr = '';
   dateStr += year+' - '+month+' - '+day+' '+hours+':'+minutes+':'+seconds;
   //Append dateStr to some element.
   document.getElementById(id).innerHTML = dateStr;

   //Repeat the function every 1000 miliseconds aka 1 second
   setTimeout(function() {
        clock(id);
   }, 1000);

}

用法是

<div id="yourID">clock input will go here</div>

clock('yourID');

笔记

该函数必须在 DOM 加载完成后调用，否则会报错。

这可以通过将带有 JS 的脚本标签放在页面底部来实现（不使用 jQuery）。

否则，如果使用 jQuery，则调用$(function() {})(等价于$(document).ready(function() {});

该功能是不言自明的，但也许您想阅读这些功能以确切了解它们的作用。

快速的谷歌搜索应该可以解决问题。

无论如何希望这会有所帮助，祝你好运:)

于 2013-10-16T09:35:20.483 回答