Javascript每隔一个星期二的倒计时计时器
Javascript每隔一个星期二的倒计时计时器
提问于 2011-04-09 04:45:16
我经营着一个电台节目的网站，每隔一个星期二早上6点到7点播出一次。我正在尝试制作一个Javascript，它将倒计时到我们的节目上线前的几天、几小时、几分钟和几秒。
然后，当我们的节目直播时，我想用PHP图像代替倒计时计时器。一个小时后的上午7点，我们的表演结束了；然后我想让PHP脚本返回到倒计时器。
我试着到处搜索自动更新的倒计时脚本，但到目前为止还没有找到任何东西。
我该如何编写这些脚本呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-04-09 05:29:21
您需要找到节目开始的第一个星期二上午7点的GMT时间，并在客户端使用新的日期将其转换为用户的本地时间。一旦你这样做了，它就像任何其他倒计时一样。
这个例子假设第一个节目是美国东部夏令时和4月5日。(Date.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>Stack Overflow用户
发布于 2011-04-09 05:56:24
大约几个小时前，我完成了一个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/
Stack Overflow用户
发布于 2011-04-09 04:58:00
这会让你得到下一集的秒数(假设你的下一集是明天)。然后你需要找到从那里开始的时间。
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 );页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5600600
复制相关文章
相似问题
腾讯云开发者
