Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

countdown 3

Status
Not open for further replies.
takwirira

takwirira

Programmer
Mar 6, 2007
23
GB
hie guys, I have a countdown for my webpage and the code is as below. However I wld like to change the event date every now and then but I wouldnt want to open and edit the file all the time. Is there any way to change the value of say Mar 6 2007 09:00:00 to Mar 6 2007 10:00:00 on the fly or with an extra function thanks


<HTML>
<head>
<script LANGUAGE="JavaScript">
<!--
var now = new Date();
var event = new Date("Mar 6 2007 09:00:00");
var seconds = (event - now) / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
ID=window.setTimeout("update();", 1000);
function update() {
now = new Date();
seconds = (event - now) / 1000;
seconds = Math.round(seconds);
minutes = seconds / 60;
minutes = Math.round(minutes);
hours = minutes / 60;
hours = Math.round(hours);
days = hours / 24;
days = Math.round(days);
document.form1.hours.value = hours;
document.form1.minutes.value = minutes;

ID=window.setTimeout("update();",1000);
}
// --></script>
</head>
<body>
<form name="form1" method="post" action="">
<strong><font face="Century Gothic">Hours
<input type="text" name="hours" value="0" size="2">
Minutes
<input type="text" name="minutes" value="0" size="2">
</font></strong>
</form>

<p>&nbsp;</p>
</body>
</html>
 
Sort by date Sort by votes
Is the change done at random, or is it something that is scheduled and consistent?

Lee
 
Upvote 0 Downvote
I think for valid data reasons, the best way would be to create a dropdown menu for each time part; year, month, day, hours, minutes.

Have a button that when clicked calls a function that changes the value of the variable event. DON'T redefine event in that function, just change the value of it.

Code: 
function changeSetDate() {
   event = new Date(all values from the dropdown boxes);
}

One more thing, you can use the .setInterval command instead of the .setTimeout, so you only need to call it once.

Code: 
var days = hours / 24;
[!]ID=window.setInterval("update();", 1000);[/!]
function update() {
now = new Date();
seconds = (event - now) / 1000;
seconds = Math.round(seconds);
minutes = seconds / 60;
minutes = Math.round(minutes);
hours = minutes / 60;
hours = Math.round(hours);
days = hours / 24;
days = Math.round(days);
document.form1.hours.value = hours;
document.form1.minutes.value = minutes;
[!]//erase this
ID=window.setTimeout("update();",1000);[/!]
}

That should be enough to give you a start.

[small]"Mom........MEATLOAF!!!! DANG!!!![/small]
<.
 
Upvote 0 Downvote
thanks for all the replies guys. The change for the time will be at an administrators request. The timer will be used in conjuction with an online quiz which will be timed thus the need for a timer to countdown. So the admin page will also need to be set up to change the value. thanks for the setInterval, I'll see what I can do
 
Upvote 0 Downvote
When the admin page is submitted with the new date and time, I would have the processing page read the original file in and split it into an array with one line per array element. Then loop through the array and find the line that starts "var event = new Date(", replace the old date and time with the new date and time, join the array into one string using carriage returns, and write the page back out to a file with the original name.

Lee
 
Upvote 0 Downvote
thanks for all the help guys. I managed to manipulate the now and even y setting values of certain dates to maintain the time countdown i.e. 1 hr. cheers
 
Upvote 0 Downvote
sorry guys when i modified the date to

var now = new Date("Mar 6 2007 08:00:00");
var event = new Date("Mar 6 2007 09:00:00");

and opened it in the browser it was not counting down and the explorer freezes. Is there anyway I could make it always countdown lets say an hour or 2
 
Upvote 0 Downvote
Since computers use exact numbers, you'll have to decide the time period you want to count down to. You can modify the time period any way you want.
Code: 
var timeperiod = 60 * 60 * 1000; //minutes times seconds time milliseconds
var now = new Date();
var event = new Date(now.getTime() + timeperiod);

Without seeing your code that doesn't work, no one can guarantee that any modifications you make to it will work, either.

Lee
 
Upvote 0 Downvote
<HTML>
<head>
<script LANGUAGE="JavaScript">
<!--
var timeperiod = 60 * 1 * 1; //minutes times seconds time milliseconds
var now = new Date();
var event = new Date(now.getTime() + timeperiod);
var seconds = (event - now) / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
ID=window.setInterval("update();", 1000);

function update() {
now = new Date();
seconds = (event - now) / 1000;
seconds = Math.round(seconds);
minutes = seconds / 60;
minutes = Math.round(minutes);
hours = minutes / 60;
hours = Math.round(hours);
days = hours / 24;
days = Math.round(days);
document.form1.hours.value = hours;
document.form1.minutes.value = minutes;

ID=window.setInterval("update();", 1000);

}
// --></script>
</head>
<body>
<form name="form1" method="post" action="">
<strong><font face="Century Gothic">Hours
<input type="text" name="hours" value="0" size="2">
Minutes
<input type="text" name="minutes" value="0" size="2">
</font></strong>
</form>

<p>&nbsp;</p>
</body>
</html>

this is the new code, when i open the page nothing counts down and it says 0 0 maybe i got the time settings wrong at the start. eg how would i represent 1 hour since 60 * 0 * 0 isnt wrking either
 
Upvote 0 Downvote
Your code example sets the event 60 milliseconds into the future, hardly measurable for a human.

As well, you only need ONE call to setInterval, not continuous ones.

Lee
 
Upvote 0 Downvote
Here is a working version of your code, it does what you want it to do:

Code: 
<HTML>
<head>
<script LANGUAGE="JavaScript">
<!--
var timeperiod = 60 * 60 * 1000; //minutes times seconds time milliseconds
var now = new Date();
[!]var event = new Date()
event.setTime(now.getTime() + timeperiod);[/!]
var seconds = (event - now) / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
[!]setInterval("update()", 1000);[/!]

function update() {
now = new Date();
seconds = (event.getTime() - now.getTime()) / 1000;
seconds = Math.round(seconds);
minutes = seconds / 60;
minutes = Math.round(minutes);
hours = minutes / 60;
hours = Math.floor(hours);
days = hours / 24;
days = Math.floor(days);
document.form1.hours.value = hours;
document.form1.minutes.value = minutes - (hours * 60);
}

// --></script>
</head>
<body>
<form name="form1" method="post" action="">
  <strong><font face="Century Gothic">Hours
  <input type="text" name="hours" value="0" size="2">
Minutes
<input type="text" name="minutes" value="0" size="2">
  </font></strong>
</form>

<p>&nbsp;</p>
</body>
</html>

I'll explain some changes.

First, you do a .setTime() on the eventDate. This way you can change the value of the date by milliseconds if you need to.

setInterval only needs to be called ONE time, that's on the load of the page.

You can use Math.Round on the seconds and minutes, but anything higher timewise than that has to use Math.floor.

If there are 59 minutes left, a round would make hours = 1, .floor puts it at it's correct value, 0;

And as is, you weren't converting time values over. Example, as is, you would have had minutes listed as 60 AND hours as 1, that is why I put the
"minutes - (hours * 60)" in the value for hours.

Look that over, that should be more than enough to get you started to add in days.




[monkey][snake] <.
 
Upvote 0 Downvote
this works wonders, i was going off all in the wrong direction. thanks for the explanation of the code and making sure I can adapt it for more. Thanks for showing me were I was going wrong.Thanks again.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TwilightLinkable
  • Locked
  • Question
Java Script Countdown + Redirect
Replies
1
Views
45
vacunita
vacunita
natureboy76
  • Locked
  • Question
15 sec countdown function?
Replies
2
Views
41
BillyRayPreachersSon
BillyRayPreachersSon
exige
  • Locked
  • Question
Newbie needs help: Countdown
Replies
4
Views
41
exige
exige
youradds
  • Locked
  • Question
Countdown, specified by USER?
Replies
3
Views
20
youradds
youradds
2DaysAway
  • Locked
  • Question
looping countdown clock 1
Replies
2
Views
30
2DaysAway
2DaysAway

Part and Inventory Search

Sponsor

Back
Top