Таймер обратного отсчета Javascript для каждого вторника

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

Вам нужно будет найти время по Гринвичу для 7 утра в первый вторник шоу, и использовать новую дату на клиенте, чтобы преобразовать ее в местное время пользователя. Как только вы это сделаете, это как любой другой обратный отсчет.

Этот пример предполагает EDT и 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>

Answer 3

Это даст вам количество секунд до вашего следующего шоу (при условии, что ваше следующее шоу завтра). Тогда вам нужно найти время оттуда.

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