我为一个广播节目运营该网站，该节目每隔一个星期二早上 6 点到 7 点播出。 我正在尝试制作一个 Javascript，它将倒计时天、小时、分钟和秒，直到我们的节目直播。
然后，当我们的节目直播时，我想用 PHP 的图像替换倒数计时器。一小时后的早上七点，我们的演出结束了；那么我希望 PHP 脚本返回倒数计时器。
我试图搜索自动更新的倒计时脚本，但到目前为止还没有找到任何东西。
我将如何制作这些脚本？
【问题讨论】：
标签： javascript time countdown
您需要找到节目开始的第一个星期二早上 7 点的 GMT 时间， 并在客户端使用 new Date 将其转换为用户的本地时间。 一旦你这样做了，它就像任何其他倒计时一样。
本示例假定美国东部时间和 4 月 5 日为首场演出。 (日期.UTC(2011, 3, 5, 11))
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Small Page</title>
<script>
function counttoShow(){
var A= [], x, d, diff,cd=document.getElementById('countdown'),
cdimg=document.getElementById('onAir'),
onair= new Date(Date.UTC(2011, 3, 5, 11)), now= new Date();
while(onair<now) onair.setDate(onair.getDate()+14);
diff= (onair-now);
if(diff<3600000){
cdimg.style.visibility='visible';
cd.style.visibility='hidden';
}
else{
x= Math.abs(diff-3600000);
d= Math.floor(x/86400000);
if(d> 1){
A.push( d + " days");
x%= 86400000;
}
x= Math.floor(x/1000);
if(x> 3600){
d= Math.floor(x/3600);
A.push(d + " hour" +(d> 1? "s": ""));
x%= 3600;
}
if(x> 60){
d= Math.floor(x/60);
A.push(d + " minute" +(d> 1? "s": ""));
x%= 60;
}
if(x> 0) A.push(x + " second" +(x> 1? "s": ""));
cdimg.style.visibility='hidden';
cd.value= A.join(", ");
}
}
window.onload=function(){
var cdtimer=setInterval(counttoShow,1000);
document.body.ondblclick=function(){
if(cd.timer){
clearInterval(cdtimer);
cdtimer=null;
}
else cdtimer=setInterval(counttoShow,1000);
}
}
</script>
</head>
<body>
<h1>Radio Show</h1>
<p><img id="onAir" src="onair.gif">
<input id="countdown" type="text" size="40" readOnly style="border:none"> until show time.
</p>
</div>
</body>
</html>
【讨论】：
大约几个小时前，我完成了一个 JavaScript 计时器的开发。
它应该可以解决问题。
function miniTimer(s,callback,opt){
function getParam(value,defaultValue){
return typeof value == 'undefined' ? defaultValue : value;
}
this.s = getParam(s,0);
this.callback = getParam(callback,null);// a callback function that takes the current time in seconds as the first parameter and the formated time as the second
var opt = getParam(opt,{});
this.settings = {
masterCallback : getParam(opt.masterCallback,null),// same as above, but this one is called when the miniTimer finishes it's work (if maxPaceDuration or limitValue is set)
autoplay : getParam(opt.autoplay,false),
limitValue : getParam(opt.limitValue,null),
maxPaceCount : getParam(opt.maxPaceCount,null),
paceDuration : getParam(opt.paceDuration,1000),//milisec,
paceValue : getParam(opt.paceValue,1)//increment with only one second; set to -1 to countdown
};
this.interval = 0;
this.paceCount = 0;
if(this.settings.autoplay)
this.start();
return this;
}
miniTimer.prototype = {
toString : function(){
var d = Math.floor(this.s / (24 * 3600));
var h = Math.floor((this.s - d* 24 * 3600) / 3600);
var m = Math.floor((this.s - d* 24 * 3600 - h * 3600) / 60);
var s = this.s % 60;
if(h <= 9 && h >= 0)
h = "0"+h;
if(m <= 9 && m >= 0)
m = "0"+m;
if(s <= 9 && s >= 0)
s = "0"+s;
var day = d != 1 ? "days" : "day";
return d+" "+day+" "+h+":"+m+":"+s;
},
nextPace : function(){
if((this.settings.maxPaceCount != null && this.settings.maxPaceCount <= this.paceCount)
|| (this.settings.limitValue != null && this.settings.limitValue == this.s))
{
this.stop();
if(this.settings.masterCallback != null)
this.settings.masterCallback(this.s,this.toString());
return;
}
this.paceCount++;
var aux = this.s + this.settings.paceValue;
this.s += this.settings.paceValue;
if(this.callback != null)
this.callback(this.s,this.toString());
return this;
},
start : function(){
var $this = this;
this.interval = setInterval(function(){$this.nextPace();},this.settings.paceDuration);
return this;
},
stop : function(){
clearInterval(this.interval);
return this;
}
}
现在你要做的就是配置正确的回调函数：
var el = document.getElementById('timer');
function getNextTuesday(){
var nextTuesday = new Date();
var t = nextTuesday.getDay();
t = t > 2 ? 9 - t : 2 - t;
nextTuesday.setDate(nextTuesday.getDate() + t);
return nextTuesday;
}
var showDuration = 2 * 60 * 60;//2h
var t = new miniTimer(Math.floor((getNextTuesday() - new Date())/1000),function(date,string){
if(date > 0)
el.innerHTML = string;
else
{
if(date <= -showDuration)
t.s = Math.floor((getNextTuesday() - new Date())/1000);
el.innerHTML = "<img src='http://t2.gstatic.com/images?q=tbn:ANd9GcT3CEVtaAYQJ4ALZRmgMHsCA8CG5tdpauLqSMhB66HJP_A0EDPPXw'>";
}
},{autoplay:true,paceValue : -1});
这是一个工作示例：http://jsfiddle.net/gion_13/8wxLP/1/
【讨论】：
这将为您提供距下一场演出的秒数（假设您的下一场演出是明天）。然后你需要从那里找到时间。
var now = new Date(),
then = new Date( 2011, 3, 9 ),
diff = new Date();
diff.setTime( Math.abs( then.getTime() - now.getTime() ) );
diff.getTime();
从那时起，您可以将超时设置为每秒运行一次，以减少显示的秒数，例如，以 1 为单位。
setTimeout( reduceSeconds );
【讨论】：