且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

制作实时时钟javascript

更新时间:2023-02-26 17:03:42

以下是如何做到这一点。 工作演示

Here's how to do it. Working Demo.

首先,在HTML文档的顶部:

First, at the top of your HTML document:

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

我们这样做,所以我们可以稍微清理一下我们的HTML代码: / p>

We do this so we can clean up our HTML code a little bit:

$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()之间的时间差。

I'm not quite sure where that middle step you were taking for came from, but the code above gets me the difference in time between $rdate1 (presumably a unix timestamp) and time().

最后,我们可以使用Javascript执行类似的操作,以便在页面加载后更新时间:

Finally, we can do something like this with Javascript to update the time once the page loads:

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