0

私は隔週火曜日の午前 6 時から午前 7 時まで放送されるラジオ番組のサイトを運営しています。ショーがライブになるまで、日、時間、分、秒をカウントダウンする Javascript を作成しようとしています。

次に、ショーがライブになったら、カウントダウン タイマーを PHP を使用した画像に置き換えたいと思います。1 時間後の午前 7 時にショーは終了しました。次に、PHP スクリプトがカウントダウン タイマーに戻るようにします。

自動更新するカウントダウン スクリプトを探してみましたが、今のところ何も見つかりません。
これらのスクリプトを作成するにはどうすればよいですか?

4

3 に答える 3

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/

于 2011-04-08T21:56:23.823 に答える
0

ショーが行われる最初の火曜日の午前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>
于 2011-04-08T21:29:20.740 に答える
0

これにより、次のショーまでの秒数が得られます (次のショーが明日であると仮定します)。次に、そこから時間を見つける必要があります。

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 );
于 2011-04-08T20:58:00.200 に答える