Tick tock where my clock

k994519

HI guys

does any one know how to write a function which will display a countdown timer based on the system time of the machine the user has......

Ideally after the timer has reached zero it will disconnect the connection to the db (that bit i can do quite easily) and close the page (this bit im unsure of)

any tips and ideas will be very much appreicated,

LordShryku

Well how long are thinking of? Something small, you could probably just [man]sleep[/man], but a large time, you should probably use meta tags or javascript.

k994519

Hi LordShryku

in terms of time im think maybe a maximum of an 1 hour, and i would like the user to see the the timer as they filled in the questions, they may also be moving from one page to another..... ( effectly moving though a group of pages)
so would this affect the sleep (); or could I get away with it....

any further ideas would be great but I think im gonna hit the hay its 507 am here in the UK and im rather tired

look forward to your reply in the morning,

thanks for ur help so far though

LordShryku

Well, if you want them to see a running timer, you'll deifnately have to use a client side language. PHP can't do this without reloading the page for every interval

k994519

is it possible, to have a refresh a hidden item every 60 seconds and use that to as the timer.....

any ideas would be great

what about session with time limits would that work?

AstroTeg

JavaScript is going to be the way to go. When the 60 minutes are up, you can have the page go to a time out page or something of your choosing.

k994519

HI astro,

thanks for your help, could you guide me to where i could get this bit of javascript

thanks

bubblenut

I wrote this countdown script a little while ago, not quite what you need but should get you one the right lines.

<script type="text/javascript">

function Countdown(release, imgid, image)
{
    //transform realease into date format
    //should probably change this to use the server time (use date())
    release = new Date(release)
    var images = new Array()
    for(var i=0;i<10;i++) {
        images[i] = new Image()
        images[i].src=image+i+'.gif'
    }

//force immediate update
update()

//update every second
setInterval(update,1000)

//Nested function update
function update()
{
    var now = new Date()
    var seconds = Math.floor((release-now)/1000) <0 ? 0 : Math.floor((release-now)/1000)
    var minutes = Math.floor(seconds/60)
    var hours   = Math.floor(minutes/60)
    var days    = Math.floor(hours/24)
    seconds     = seconds-(minutes*60)
    minutes     = minutes-(hours*60)
    hours       = hours-(days*24)

    var img = new Array()
    img[8] = images[seconds%10]
    img[7] = images[seconds<10?0:Math.floor(seconds/10)%10]
    img[6] = images[minutes%10]
    img[5] = images[minutes<10?0:Math.floor(minutes/10)%10]
    img[4] = images[hours%10]
    img[3] = images[hours<10?0:Math.floor(hours/10)%10]
    img[2] = images[days%10]
    img[1] = images[days<10?0:Math.floor(days/10)%10]
    for(var i=1;i<9;i++) {
        var command='document.images.'+imgid+(i+1)+'.src=img['+i+'].src'
//          alert(command+'\n'+' and img['+i+'].src is '+img[i].src);
            eval(command)
        }
    }
}
</script>
<img src="" width="7" height="10" alt="" id="img2" /><img src="" width="7" height="10" alt="" id="img3" />days
<img src="" width="7" height="10" alt="" id="img4" /><img src="" width="7" height="10" alt="" id="img5" />hr
<img src="" width="7" height="10" alt="" id="img6" /><img src="" width="7" height="10" alt="" id="img7" />min
<img src="" width="7" height="10" alt="" id="img8" /><img src="" width="7" height="10" alt="" id="img9" />s <a href="dogs" class="t11bb">&raquo;buy</a></span></td></tr>
<script type="text/javascript">
new Countdown('April 02 2004 00:00:01','img','');
</script>

The first parameter is the time you are counting down to, the second is the prefix of the the div ids (so that you can have more than one countdown on any particular page), the third is the prefix for the image file names (so you can have different number images for different countdowns)

HTH
Bubble

k994519

hey thanks bubble,

I will try that later as i gotta clean up my code , could you possibly send the images for the timer if you got them....

thanks

also in regard to this code line in the code u sent

release = new Date(release)

could i use this syntax?

release = new Date(yyyy-mm-dd hh-mm-ss)

bubblenut

I do have images, but they're very specific to a promotion we were running over the last couple of weeks with The Matrix, so they're all green Matrix style text on a black background. Would that be ok?

The new Date constructor can be envoked in the following ways

new Date(“Month dd, yyyy hh:mm:ss”)
new Date(“Month dd, yyyy”)
new Date(yy,mm,dd,hh,mm,ss)
new Date(yy,mm,dd)
new Date(milliseconds)

k994519

hey bubble,

thanks for your help soo far its been great,

the images sound perfect as i have a dark blue back ground anyway so it will look really great thanks,

quick question is it possible for the user to set the time in a form before the execution of the javascript? if so what would the best way of doing this?

bubblenut

Here you go mate, hope they help

With regards to the time being set by a form beforehand, yes, this is definately possible but it's also not very difficult, I'll let you have a bash at it yourself and if you have some problems just ask back ok?

Bubble

k994519

HI bubble, cant thank you enough for the help you've given I will definetly give it bash later on today... and will get back to you if o in my case when error's occur...