Deaf Topics - Free Advertising - Free Advertising - Web Advertising - Self Improvement Articles Directory
PDA

View Full Version : java script for countdown ticker

lowridertj
Jun 9th 2007, 10:27 pm
How would I take a set time can be

$servertime = time();
$time = $servertime + 86400;

How can I take
$time

and make it a ticker so it counts down in seconds. displays days hours minutes seconds.

so the clock moves even when you don't refresh the page.

Any help would be great..

Thanks,
TJ
gibex
Jun 10th 2007, 2:25 pm
search on google :)
lowridertj
Jun 10th 2007, 5:33 pm
have already done so and not finding exactly what im needing. looking for a simple ticker and the ones im finding are complex more for a other things. thats why i gave an example what im looking for.

TJ
lowridertj
Jun 13th 2007, 5:25 am
Can anyone help with this at all?


Greatly appreciated..

thanks in advance.
TJ
krt
Jun 13th 2007, 5:56 am
http://dynamicdrive.com would have many of these, search "countdown"

e.g.:
http://www.dynamicdrive.com/dynamicindex6/universalcountdown.htm
Note it needs a date inputted, and not as a timestamp. So you would want to use (in your PHP): $time = date('M d, Y G:i:s', $servertime + 86400);
Hope that's right, you might need to play with it a bit.
lowridertj
Jun 13th 2007, 6:24 am
Thank you will play with it a bit. rep left.
krakjoe
Jun 13th 2007, 6:26 am
Clocks in general don't count downwards, what makes this one special ??

The problem you have here is that the javascript Date() object is not that good, it cannot handle setting the date with hours minutes and seconds precsion, you can create date objects in the future, but you can only specify the year month and day for the timestamp, it's still dooable but not very accurate.
Mike H.
Jun 13th 2007, 7:01 am
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<script type="text/javascript">

var refDate = new Date('2007 June 13 10:12'); // Count down, count up from this date/time
var GMToffset = -4; // Your current GMT offset, whether Daylight or Standard time
var preMsg = "Message prior to the date"
var postMsg = "Message after the date"

function update(){

var nForm = document.forms[0];
var currDate = new Date();
currDate.setHours(GMToffset+currDate.getHours()+currDate.getTimezoneOffset()/60);
if (refDate > currDate)
{
document.getElementById('message').firstChild.data = preMsg;
}
else {
document.getElementById('message').firstChild.data = postMsg;
}
var remTime = refDate-currDate;
if (remTime < 0)
{
remTime = remTime * -1;
}
var nDays = parseInt(remTime/86400000);
var nHours = parseInt((remTime-(nDays*86400000))/3600000);
var nMin = parseInt((remTime-(nDays*86400000)-(nHours*3600000))/60000);
var nSec = 0;
if (refDate > currDate)
{
nSec = 60-(currDate.getSeconds());
}
else {
nSec = currDate.getSeconds();
}
var nYears = parseInt(nDays/365);
var nMonths = parseInt((nDays-(nYears*365))/30);
var rDays = parseInt((nDays-(nYears*365)-(nMonths*30)));
if (nYears < 10)
{
nYears = "0"+nYears;
}
if (nMonths < 10)
{
nMonths = "0"+nMonths;
}
if (rDays < 10)
{
rDays = "0"+rDays;
}
if (nHours < 10)
{
nHours = "0"+nHours;
}
if (nMin < 10)
{
nMin = "0"+nMin;
}
if (nSec < 10)
{
nSec = "0"+nSec;
}
if (nSec == 60)
{
nSec = "00";
}
nForm['years'].value = nYears;
nForm['months'].value = nMonths;
nForm['days'].value = rDays;
nForm['hours'].value = nHours;
nForm['minutes'].value = nMin;
nForm['seconds'].value = nSec;
setTimeout("update()",1000);
}

onload=update;

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:620px;margin:auto;font-family:times;font-size:12pt}
form input {text-align:right}
fieldset {width:610px;background-color:#f0fff0;border:1px solid #87ceeb;padding-bottom:5px}
legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
label{font-family:times;font-size:12pt;padding-left:7px}
#message {font-family:tahoma;font-size:14pt;text-align:center;background-color:#f0fff0;padding:5px;width:300px;margin-left:auto;margin-right:auto;margin-bottom:10px}

</style>
</head>
<body>
<div id='message'>&nbsp;</div>

<form action="">
<fieldset>
<legend>CountDown/CountUp</legend>
<label>Years: <input type='text' name='years' size='3' readonly></label>
<label>Months: <input type='text' name='months' size='3' readonly></label>
<label>Days: <input type='text' name='days' size='3' readonly></label>
<label>Hours: <input type='text' name='hours' size='3' readonly></label>
<label>Minutes: <input type='text' name="minutes" size='3' readonly></label>
<label>Seconds: <input type='text' name="seconds" size='3' readonly></label>
</fieldset>
</form>
</body>
</html>
krakjoe
Jun 13th 2007, 7:15 am
I did not know you could do that : new Date('2007 July 4 12:00'), I thought there was just setTime(); nice post .....
lowridertj
Jun 13th 2007, 7:47 am
Clocks in general don't count downwards, what makes this one special ??

The problem you have here is that the javascript Date() object is not that good, it cannot handle setting the date with hours minutes and seconds precsion, you can create date objects in the future, but you can only specify the year month and day for the timestamp, it's still dooable but not very accurate.

I already have this worked out in php to get more exact time. just need to use a javascript markup to have a live countdown till a set time.

example.
I have a set time time(); + 86400;

I want to have java count down till that time. it don't have to have seconds but should be accurate enough to set down to minutes. no reason it cant be. I have seen java clocks do just that.
lowridertj
Jun 13th 2007, 7:48 am
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<script type="text/javascript">

var refDate = new Date('2007 June 13 10:12'); // Count down, count up from this date/time
var GMToffset = -4; // Your current GMT offset, whether Daylight or Standard time
var preMsg = "Message prior to the date"
var postMsg = "Message after the date"

function update(){

var nForm = document.forms[0];
var currDate = new Date();
currDate.setHours(GMToffset+currDate.getHours()+currDate.getTimezoneOffset()/60);
if (refDate > currDate)
{
document.getElementById('message').firstChild.data = preMsg;
}
else {
document.getElementById('message').firstChild.data = postMsg;
}
var remTime = refDate-currDate;
if (remTime < 0)
{
remTime = remTime * -1;
}
var nDays = parseInt(remTime/86400000);
var nHours = parseInt((remTime-(nDays*86400000))/3600000);
var nMin = parseInt((remTime-(nDays*86400000)-(nHours*3600000))/60000);
var nSec = 0;
if (refDate > currDate)
{
nSec = 60-(currDate.getSeconds());
}
else {
nSec = currDate.getSeconds();
}
var nYears = parseInt(nDays/365);
var nMonths = parseInt((nDays-(nYears*365))/30);
var rDays = parseInt((nDays-(nYears*365)-(nMonths*30)));
if (nYears < 10)
{
nYears = "0"+nYears;
}
if (nMonths < 10)
{
nMonths = "0"+nMonths;
}
if (rDays < 10)
{
rDays = "0"+rDays;
}
if (nHours < 10)
{
nHours = "0"+nHours;
}
if (nMin < 10)
{
nMin = "0"+nMin;
}
if (nSec < 10)
{
nSec = "0"+nSec;
}
if (nSec == 60)
{
nSec = "00";
}
nForm['years'].value = nYears;
nForm['months'].value = nMonths;
nForm['days'].value = rDays;
nForm['hours'].value = nHours;
nForm['minutes'].value = nMin;
nForm['seconds'].value = nSec;
setTimeout("update()",1000);
}

onload=update;

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:620px;margin:auto;font-family:times;font-size:12pt}
form input {text-align:right}
fieldset {width:610px;background-color:#f0fff0;border:1px solid #87ceeb;padding-bottom:5px}
legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
label{font-family:times;font-size:12pt;padding-left:7px}
#message {font-family:tahoma;font-size:14pt;text-align:center;background-color:#f0fff0;padding:5px;width:300px;margin-left:auto;margin-right:auto;margin-bottom:10px}

</style>
</head>
<body>
<div id='message'>&nbsp;</div>

<form action="">
<fieldset>
<legend>CountDown/CountUp</legend>
<label>Years: <input type='text' name='years' size='3' readonly></label>
<label>Months: <input type='text' name='months' size='3' readonly></label>
<label>Days: <input type='text' name='days' size='3' readonly></label>
<label>Hours: <input type='text' name='hours' size='3' readonly></label>
<label>Minutes: <input type='text' name="minutes" size='3' readonly></label>
<label>Seconds: <input type='text' name="seconds" size='3' readonly></label>
</fieldset>
</form>
</body>
</html>


rep added thank you...