CODEWITHSUNDEEP
javascripttimecountdown
Michael
Michael

Reputation: 3

Javascript Countdown Timer for every other Tuesday

I run the site for a radio show that airs every other Tuesday from 6 to 7am. I'm trying to make a Javascript that will countdown the days, hours, minutes, and seconds till our show is live.

Then, when our show is live, I'd like to replace the countdown timer with an image using PHP. One hour later at 7am, our show is over; then I'd like the PHP script to return to the countdown timer.

I've tried to search around for countdown scripts that auto-update, but haven't found anything so far.
How would I make these scripts?

Upvotes: 0

Views: 2209

Answers (3)

kennebec
kennebec

Reputation: 104760

You'll need to find the GMT time for 7am on the first tuesday the show is on, and use new Date on the client to convert it to the user's local time. Once you do that, it is like any other count down.

This example assumes EDT and April 5 for the first show. (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>

Upvotes: 0

gion_13
gion_13

Reputation: 41533

About a few hours ago i finished developing a javascript timer.
It should do the trick. 

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

Now all you have to do is configure the proper callback function: 

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

here's a working example : http://jsfiddle.net/gion_13/8wxLP/1/

Upvotes: 1

Kevin Peno
Kevin Peno

Reputation: 9196

This will get you the number of seconds until your next show (assuming your next show is tomorrow). Then you need to find the time from there.

var now = new Date(),
    then = new Date( 2011, 3, 9 ),
    diff = new Date();

diff.setTime( Math.abs( then.getTime() - now.getTime() ) );
diff.getTime();

From that point, you can set a timeout to run every second to recude the number of seconds displayed by 1, for example.

setTimeout( reduceSeconds );

Upvotes: 0

Related Questions