制作实时时钟javascript [英] Making Live Clock javascript
问题描述
有没有人知道如何让实时的javascript时间运行..
does anyone know how to make live javascript time running..
我有这个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";
是否有可能让它像现场直播?
is it possible to make it like running live??
推荐答案
以下是如何做到这一点。 工作演示 。
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 );
}
这篇关于制作实时时钟javascript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!