java script for countdown ticker

Discussion in 'JavaScript' started by lowridertj, Jun 9, 2007.

Thread Status:
Not open for further replies.
0
  1. #1
    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
     
    lowridertj, Jun 9, 2007 IP
  2. gibex

    gibex Active Member

    Messages:
    1,060
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    95
    #2
    search on google :)
     
    gibex, Jun 10, 2007 IP
  3. lowridertj

    lowridertj Well-Known Member

    Messages:
    2,882
    Likes Received:
    40
    Best Answers:
    0
    Trophy Points:
    195
    #3
    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 10, 2007 IP
  4. lowridertj

    lowridertj Well-Known Member

    Messages:
    2,882
    Likes Received:
    40
    Best Answers:
    0
    Trophy Points:
    195
    #4
    Can anyone help with this at all?


    Greatly appreciated..

    thanks in advance.
    TJ
     
    lowridertj, Jun 13, 2007 IP
  5. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #5
    krt, Jun 13, 2007 IP
    lowridertj likes this.
  6. lowridertj

    lowridertj Well-Known Member

    Messages:
    2,882
    Likes Received:
    40
    Best Answers:
    0
    Trophy Points:
    195
    #6
    Thank you will play with it a bit. rep left.
     
    lowridertj, Jun 13, 2007 IP
  7. krakjoe

    krakjoe Well-Known Member

    Messages:
    1,795
    Likes Received:
    141
    Best Answers:
    0
    Trophy Points:
    135
    #7
    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.
     
    krakjoe, Jun 13, 2007 IP
  8. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #8 
    <!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>
    Code (markup):
     
    Mike H., Jun 13, 2007 IP
    krakjoe and lowridertj like this.
  9. krakjoe

    krakjoe Well-Known Member

    Messages:
    1,795
    Likes Received:
    141
    Best Answers:
    0
    Trophy Points:
    135
    #9
    I did not know you could do that : new Date('2007 July 4 12:00'), I thought there was just setTime(); nice post .....
     
    krakjoe, Jun 13, 2007 IP
  10. lowridertj

    lowridertj Well-Known Member

    Messages:
    2,882
    Likes Received:
    40
    Best Answers:
    0
    Trophy Points:
    195
    #10
    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 13, 2007 IP
  11. lowridertj

    lowridertj Well-Known Member

    Messages:
    2,882
    Likes Received:
    40
    Best Answers:
    0
    Trophy Points:
    195
    #11
    rep added thank you...
     
    lowridertj, Jun 13, 2007 IP
Thread Status:
Not open for further replies.