制作实时时钟 javascript

Question

有谁知道如何让实时javascript时间运行..

我有这个 php 代码

    $expiredate = date('d m Y G:i:s', $rdate1);
    $f_ex_date = explode(" ", $expiredate);
    $f_ex_time = explode(":", $expiredate);
    $_endDate = mktime($f_ex_date[0],$f_ex_date[1],$f_ex_date[2],$f_ex_date[1],$f_ex_date[0],$f_ex_date[2]);
    $time = $_endDate - time();
    $days = floor($time/86400);
    $hours = floor(($time-($days*86400))/3600);
    $mins = floor (($time-($days*86400)-($hours*3600))/60);
    $secs = floor ($time-($days*86400)-($hours*3600)-($mins*60));

   echo "Your account going to be expired in <span style=\"color: #C11B17;font-family:arial;font-size: 16px;\">".$days."</span> Days <span style=\"color: #C11B17;font-family:arial;font-size: 16px;\">".$hours."</span> Hours <span style=\"color: #C11B17;font-family:arial;font-size: 16px;\">".$mins."</span> Minutes <span style=\"color: #C11B17;font-family:arial;font-size: 16px;\">".$secs."</span> Seconds";

有没有可能让它像现场直播一样？？

Answer 1

这里是如何做到这一点。 Working Demo.

首先，在 HTML 文档的顶部：

.datetime {
    color: #C11B17;
    font-family:arial;
    font-size: 16px;
}

我们这样做是为了稍微清理一下我们的 HTML 代码：

$rdate1 = 1240550032; // Fri, 24 Apr 2009 05:13:52 GMT
$expiredate = date('d m Y G:i:s', $rdate1);
$time = $rdate1 - time();
$days = floor($time/86400);
$hours = floor(($time-($days*86400))/3600);
$mins = floor(($time-($days*86400)-($hours*3600))/60);
$secs = floor($time-($days*86400)-($hours*3600)-($mins*60));

printf("
    Your account is going to expire in
    <span class='datetime' id='days'>%s</span> Days
    <span class='datetime' id='hours'>%s</span> Hours
    <span class='datetime' id='minutes'>%s</span> Minutes
    <span class='datetime' id='seconds'>%s</span> Seconds
", $days, $hours, $mins, $secs);

我不太确定您所采取的中间步骤来自哪里，但上面的代码让我知道了 $rdate1（可能是 unix 时间戳）和 time() 之间的时间差。

最后，我们可以用 Javascript 做这样的事情来更新页面加载后的时间：

addEvent(window, 'load', function() {
    var eDays = document.getElementById('days');
    var eHours = document.getElementById('hours');
    var eMinutes = document.getElementById('minutes');
    var eSeconds = document.getElementById('seconds');
    var timer;
    timer = setInterval(function() {
        var vDays = parseInt(eDays.innerHTML, 10);
        var vHours = parseInt(eHours.innerHTML, 10);
        var vMinutes = parseInt(eMinutes.innerHTML, 10);
        var vSeconds = parseInt(eSeconds.innerHTML, 10);

        vSeconds--;
        if(vSeconds < 0) {
            vSeconds = 59;
            vMinutes--;
            if(vMinutes < 0) {
                vMinutes = 59;
                vHours--;
                if(vHours < 0) {
                    vHours = 23;
                    vDays--;
                }
            }
        } else {
            if(vSeconds == 0 &&
               vMinutes == 0 &&
               vHours == 0 &&
               vDays == 0) {
                clearInterval(timer);
            }
        }
        eSeconds.innerHTML = vSeconds;
        eMinutes.innerHTML = vMinutes;
        eHours.innerHTML = vHours;
        eDays.innerHTML = vDays;
    }, 1000);
});


function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}

Answer 2

使用一点 JavaScript 在客户端上是可行的。如果不使用 jQuery 之类的框架，这在此起到了微不足道的帮助，基本方法将类似于以下内容：

• 设置事件处理程序以每秒触发一次

在事件处理程序中：

• 检索当前日期和时间并根据需要设置格式
• 用新值更新另一个元素的内容

作为一个具体示例，以下函数将使用命名元素设置简单的日期/时间更新：

function clock( id ) {
    var target = document.getElementById( id );
    if( target ) {
        var callback = function() {
            var datetime = new Date().toLocaleString();
            target.innerHTML = datetime;
        };
    callback();
        window.setInterval( callback, 1000 );
    }
}

注意使用new Date().toLocaleString() 来检索和格式化当前日期/时间；此外，使用window.setInterval() 设置回调以每秒触发一次。

Answer 3

PHP，因为它是 server-side，所以不能活。您必须进行日期操作（至少是更改的内容）并使用 JavaScript 更新 DOM，即 client-side。

史蒂夫

Answer 4

JS-Clock 是实时时钟的最佳解决方案。它的迷你 JS 版本只有 4 KB。我推荐这个。