Question

我在网站上播放一个广播节目，每隔一个星期二从早上6点到早上7点播出。我正在尝试制作一个Javascript来倒数天，小时，分钟和秒，直到我们的节目现场直播。

然后，当我们的节目现场直播时，我想用PHP替换倒数计时器和图像。一小时后的早上7点，我们的节目结束了;然后我想让PHP脚本返回到倒数计时器。

我试图搜索自动更新的倒计时脚本，但到目前为止还没有找到任何内容我该如何制作这些剧本？

Answer 1

大约几个小时前，我完成了一个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/

Answer 2

这将为您提供下一场演出前的秒数（假设明天您的下一场演出）。然后你需要从那里找到时间。

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

Answer 3

你需要在节目开始的第一个星期二早上7点找到GMT时间，并在客户端上使用新日期将其转换为用户的本地时间。一旦你这样做，就像任何其他倒计时一样。

此示例假定EDT和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>

每隔一个星期二的Javascript倒数计时器

3 个答案: