Need Elapsed Time Java Script (Full Version)

All Forums >> [Web Development] >> Microsoft FrontPage Help



Message

Larry M. -> Need Elapsed Time Java Script (1/24/2005 21:01:23)

Hello Everyone,

I'm doing a freebie site for "Operation We Care - Support Our Soldiers" and think an elapsed time script such as you see here: http://www.globalsecurity.org/military/ops/iraq-timeline.htm would help drive the point home that the war goes on and on.

Have looked around but can't find one like this nor can I look at the code because Passler refuses to work since installation of SP2.

Any help appreciated - if possible pass on the script with March 19, 2003 encoded.

Thanks!




Kitka -> RE: Need Elapsed Time Java Script (1/24/2005 21:48:48)

This might do the trick:
http://javascript.internet.com/clocks/digital-countdown.html

Or maybe you could copy what they have on their site as you like it. Code from the source is: 

<APPLET 
codebase="../../clock/"
code="countdown.class" width="193" height="21">
<PARAM name="text" value="Countdown">
<PARAM name="font" value="lcdb0">

<PARAM name="year" value="2003">
<PARAM name="month" value="03">
<PARAM name="day" value="19">

<PARAM name="hour" value="20">
<PARAM name="minute" value="00">
<PARAM name="second" value="01">
</APPLET>


There is also a .class file you'd need to grab.

BTW - what is Passler?



ou812 -> RE: Need Elapsed Time Java Script (1/24/2005 22:03:51)

I took this: http://javascript.internet.com/clocks/digital-countdown.html#source

And then changed the code a bit so it would count up: 

later = new Date("Mar 19 2003 0:00:01");

days = (now - later) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (now - later) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (now - later) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (now - later) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);


Then, you would just need to change or remove whatever text in the code you want displayed.



Larry M. -> RE: Need Elapsed Time Java Script (1/24/2005 22:22:55)

Kitka,

I couldn't get this code to work:

<APPLET
codebase="../../clock/"
code="countdown.class" width="193" height="21">
<PARAM name="text" value="Countdown">
<PARAM name="font" value="lcdb0">

<PARAM name="year" value="2003">
<PARAM name="month" value="03">
<PARAM name="day" value="19">

<PARAM name="hour" value="20">
<PARAM name="minute" value="00">
<PARAM name="second" value="01">
</APPLET>


quote:

There is also a .class file you'd need to grab


I can't look at the code because Paessler Site Inspector was all but crippled since XP SP2 was installed. Could you get the .class file for me, please?

Thanks!



Larry M. -> RE: Need Elapsed Time Java Script (1/24/2005 22:28:11)

ou812,

Appreciate your working on the below code for me but I couldn't get it to work. I tried >Insert>WebComponent>Advanced Controls>HTML and also inserted it in code view. Please let me know how you got it going.


later = new Date("Mar 19 2003 0:00:01");

days = (now - later) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (now - later) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (now - later) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (now - later) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);

Thanks!






Kitka -> RE: Need Elapsed Time Java Script (1/24/2005 22:35:20)

quote:

Could you get the .class file for me, please?


Enter this in your browser and save it!

http://www.globalsecurity.org/clock/countdown.class



Kitka -> RE: Need Elapsed Time Java Script (1/24/2005 22:46:30)

You will need to edit this line so it points to the correct directory in your web:

codebase="../../clock/"

Plus, I forgot to mention you'll need to also grab all the number gifs 0-9, that are used in the display.

Easiest way to do that is save them out of your temporary internet file folder.



ou812 -> RE: Need Elapsed Time Java Script (1/25/2005 0:06:00)

quote:

ORIGINAL: Larry M.

ou812,

Appreciate your working on the below code for me but I couldn't get it to work. I tried >Insert>WebComponent>Advanced Controls>HTML and also inserted it in code view. Please let me know how you got it going.


In code view, do just as they state on the site:
<!-- THREE STEPS TO INSTALL DIGITAL COUNTDOWN:

1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->

Then, after pasting all that in change that block of code from what they have to what I did. Then, of course, change any of the HTML you want.

You'll need to download the gif images too, otherwise you won't see much of anything (so maybe it was working?). I actually downloaded them, and unzipped them my images directory. I then had to change that in the JS too. This is what I mean: 
c1 = new Image(); c1.src = "images/1c.gif";
c2 = new Image(); c2.src = "images/2c.gif";
c3 = new Image(); c3.src = "images/3c.gif";
c4 = new Image(); c4.src = "images/4c.gif";
c5 = new Image(); c5.src = "images/5c.gif";
c6 = new Image(); c6.src = "images/6c.gif";
c7 = new Image(); c7.src = "images/7c.gif";
c8 = new Image(); c8.src = "images/8c.gif";
c9 = new Image(); c9.src = "images/9c.gif";
c0 = new Image(); c0.src = "images/0c.gif";
Cc = new Image(); Cc.src = "images/Cc.gif";


If you don't move the gifs to the image directory then no need to do this part. I just like to keep my images separate.

Let me know if that doesn't make sense or if it doesn't work for you still. Or maybe you are going with Kitka's suggestion.



Larry M. -> RE: Need Elapsed Time Java Script (1/25/2005 12:33:38)

quote:

In code view, do just as they state on the site


Brian,

OK, didn't understand I needed to work from http://javascript.internet.com/clocks/digital-countdown.html then amend with your changes. Speaking of which, where in the script do I insert/substitute your changes (below)? As you can tell I'm not a coder.

later = new Date("Mar 19 2003 0:00:01");

days = (now - later) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (now - later) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (now - later) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (now - later) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);

If it's not asking too much, would you please amend the entire script and post?




ou812 -> RE: Need Elapsed Time Java Script (1/25/2005 13:04:18)

Here ya go, Larry: 
<html>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
//Created by DendE PhisH
function getTime() {
c1 = new Image(); c1.src = "images/1c.gif";
c2 = new Image(); c2.src = "images/2c.gif";
c3 = new Image(); c3.src = "images/3c.gif";
c4 = new Image(); c4.src = "images/4c.gif";
c5 = new Image(); c5.src = "images/5c.gif";
c6 = new Image(); c6.src = "images/6c.gif";
c7 = new Image(); c7.src = "images/7c.gif";
c8 = new Image(); c8.src = "images/8c.gif";
c9 = new Image(); c9.src = "images/9c.gif";
c0 = new Image(); c0.src = "images/0c.gif";
Cc = new Image(); Cc.src = "images/Cc.gif";
now = new Date();

//ENTER BELOW THE DATE YOU WISH TO COUNTDOWN TO
later = new Date("Mar 19 2003 0:00:01");

days = (now - later) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (now - later) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (now - later) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (now - later) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);

if (secondsRound <= 9) {
document.images.g.src = c0.src;
document.images.h.src = eval("c"+secondsRound+".src");
}
else {
document.images.g.src = eval("c"+Math.floor(secondsRound/10)+".src");
document.images.h.src = eval("c"+(secondsRound%10)+".src");
}
if (minutesRound <= 9) {
document.images.d.src = c0.src;
document.images.e.src = eval("c"+minutesRound+".src");
}
else {
document.images.d.src = eval("c"+Math.floor(minutesRound/10)+".src");
document.images.e.src = eval("c"+(minutesRound%10)+".src");
}
if (hoursRound <= 9) {
document.images.y.src = c0.src;
document.images.z.src = eval("c"+hoursRound+".src");
}
else {
document.images.y.src = eval("c"+Math.floor(hoursRound/10)+".src");
document.images.z.src = eval("c"+(hoursRound%10)+".src");
}
if (daysRound <= 9) {
document.images.x.src = c0.src;
document.images.a.src = c0.src;
document.images.b.src = eval("c"+daysRound+".src");
}
if (daysRound <= 99) {
document.images.x.src = c0.src;
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
if (daysRound <= 999){
document.images.x.src = eval("c"+Math.floor(daysRound/100)+".src");
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
newtime = window.setTimeout("getTime();", 1000);
}
//  End -->
</script>

</HEAD>

<BODY onLoad="getTime()">

<div align="center">
<h3>Time since March 19, 2003</h3>
</div>

<center>
<table><tr><td bgcolor="black" valign="bottom">
<img height=21 src="images/0c.gif" width=16 name=x>
<img height=21 src="images/0c.gif" width=16 name=a>
<img height=21 src="images/0c.gif" width=16 name=b>
<img height=21 src="images/Cc.gif" width=9 name=c>
<img height=21 src="images/0c.gif" width=16 name=y>
<img height=21 src="images/0c.gif" width=16 name=z>
<img height=21 src="images/Cc.gif" width=9 name=cz>
<img height=21 src="images/0c.gif" width=16 name=d>
<img height=21 src="images/0c.gif" width=16 name=e>
<img height=21 src="images/Cc.gif" width=9 name=f>
<img height=21 src="images/0c.gif" width=16 name=g>
<img height=21 src="images/0c.gif" width=16 name=h>
</td></tr></table>
</center>

<div align="center">
<h4>(Days : Hours : Minutes : Seconds)</h4>
</div>


<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

</html>


This is an entire HTML page. So, you would need to place your own HTML code where ever needed between the <Body> tags in this page, and change whatever HTML displays in there already to display as you want, or just remove them. Or, of course, you can take this and place it in your current page. Which ever is easiest for you to do.

Recall too, that you need to download the images off of the URL (there was a download images link there too). Then, since I've changed this code to look in the images directory that is where you will need to place them, or update this code to reflect where you've placed them.

Let me know if this didn't make sense and I can elaborate some more as needed.



Larry M. -> RE: Need Elapsed Time Java Script (1/25/2005 14:54:32)

Brian,

Making progress but hit a snag with the images.

My half-way crippled copy of Paessler Site Inspector only shows these images: Cc, 9c, 2c, 1c and 4c which I saved to my images subdirectory. Missing are these images: 3c, 5c, 6c, 7c and 8c.

Any thoughts?



ou812 -> RE: Need Elapsed Time Java Script (1/25/2005 15:45:44)

From our PM's sounds like you are on the right track. Lemme know how it goes!



Larry M. -> RE: Need Elapsed Time Java Script (1/25/2005 16:52:32)

quote:

From our PM's sounds like you are on the right track. Lemme know how it goes!


Brian,

Script WORKING[:)]! Just some fine tuning re: font size/style/color which I'll communicate via PM.

Kitka, appreciate your input as well. Went with the existing java script (modified by Brian) because it seemed more at my low recognition level [:-] but that's been a real struggle none-the-less.




Larry M. -> RE: Need Elapsed Time Java Script (1/25/2005 18:38:48)

Brian,

Happy to report that removing the <h3> tags now has the script working with above and below text in Bold Verdana size 2 (see attachment). Project completed! Big sigh [;)]

Many, many thanks!

For those who would like the final (tested) Elapsed Time script, here it is:

<html>
<!-- THREE STEPS TO INSTALL ELAPSED TIME SCRIPT (March 19, 2003) :


1. Copy the coding into the HEAD of your HTML document

2. Add the onLoad event handler into the BODY tag

3. Put the last coding into the BODY of your HTML document -->


<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
//Created by DendE PhisH
function getTime() {
c1 = new Image(); c1.src = "images/1c.gif";
c2 = new Image(); c2.src = "images/2c.gif";
c3 = new Image(); c3.src = "images/3c.gif";
c4 = new Image(); c4.src = "images/4c.gif";
c5 = new Image(); c5.src = "images/5c.gif";
c6 = new Image(); c6.src = "images/6c.gif";
c7 = new Image(); c7.src = "images/7c.gif";
c8 = new Image(); c8.src = "images/8c.gif";
c9 = new Image(); c9.src = "images/9c.gif";
c0 = new Image(); c0.src = "images/0c.gif";
Cc = new Image(); Cc.src = "images/Cc.gif";
now = new Date();

//ENTER BELOW THE DATE YOU WISH TO COUNT UP FROM
later = new Date("Mar 19 2003 21:30:01");

days = (now - later) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (now - later) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (now - later) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (now - later) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);

if (secondsRound <= 9) {
document.images.g.src = c0.src;
document.images.h.src = eval("c"+secondsRound+".src");
}
else {
document.images.g.src = eval("c"+Math.floor(secondsRound/10)+".src");
document.images.h.src = eval("c"+(secondsRound%10)+".src");
}
if (minutesRound <= 9) {
document.images.d.src = c0.src;
document.images.e.src = eval("c"+minutesRound+".src");
}
else {
document.images.d.src = eval("c"+Math.floor(minutesRound/10)+".src");
document.images.e.src = eval("c"+(minutesRound%10)+".src");
}
if (hoursRound <= 9) {
document.images.y.src = c0.src;
document.images.z.src = eval("c"+hoursRound+".src");
}
else {
document.images.y.src = eval("c"+Math.floor(hoursRound/10)+".src");
document.images.z.src = eval("c"+(hoursRound%10)+".src");
}
if (daysRound <= 9) {
document.images.x.src = c0.src;
document.images.a.src = c0.src;
document.images.b.src = eval("c"+daysRound+".src");
}
if (daysRound <= 99) {
document.images.x.src = c0.src;
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
if (daysRound <= 999){
document.images.x.src = eval("c"+Math.floor(daysRound/100)+".src");
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
newtime = window.setTimeout("getTime();", 1000);
}
// End -->
</script>

</HEAD>


[image]local://upfiles/7171/B5D62AD1C7134813A2422FA9C14DF565.gif[/image]



ou812 -> RE: Need Elapsed Time Java Script (1/25/2005 19:02:48)

Excellent, Larry. Glad you got it all going!

quote:

//ENTER BELOW THE DATE YOU WISH TO COUNTDOWN TO


Of course, since we've switched the script this comment should read:
//ENTER BELOW THE DATE YOU WISH TO COUNT UP FROM [:D]



Larry M. -> RE: Need Elapsed Time Java Script (1/25/2005 19:40:03)

quote:

Of course, since we've switched the script this comment should read: //ENTER BELOW THE DATE YOU WISH TO COUNT UP FROM


Brian,

Oops! Changed. Nice catch.

Hope this doesn't happen, but will this script accomodate more than 999 days? If not, can it be modified to recognize the fourth daily digit?



ou812 -> RE: Need Elapsed Time Java Script (1/25/2005 21:03:08)

No, it wont roll over to 1000 days. But, if need be, post in about 300 (maybe 290 days, in case I'm real busy) days if it is still needed and I'll see if I can update it, or someone else around here. Of course, you could always cheat too, and just put up a "1" gif to the left when the time comes. But, you would have to worry again in another 999 days!



heffe55 -> RE: Need Elapsed Time Java Script (2/7/2005 18:30:26)

Hello My name is Jeff Ines and I have been trying to do somthing like this but a countdown..... I have tried and tried... I guess im doing somthing wrong..... that or my free msn groups site that I am useing does not actually use java script....

Im not great with html and I freely admit that this code is way over my head... Could someone help me out with this code or a different one maybe in regular html vs java script.

the site I am trying to get this to work on is http://groups.msn.com/wsqsac

I have the code on notepad and when I try to insert it in it disappears.............. Im just totally lost.... any and all help is needed..... I am really thinking that I will have to find a regular html code.....

Thanks
Jeff Ines



Larry M. -> RE: Need Elapsed Time Java Script (2/7/2005 18:52:12)

quote:

I have the code on notepad and when I try to insert it in it disappears


Jeff,

What design program are you using? How do you "insert" code?

Welcome to OutFront!



heffe55 -> RE: Need Elapsed Time Java Script (2/7/2005 19:14:21)

I really dont know........ I just know that its msn groups sites... I can put things in the lazy way or i can go in and write the html code.... but most of the code on my site was done for me and I just have gone in and put in differnt colors or backgrounds in to the existing html... Have you been to the website to see what I am trying to do... the most simple version would just be the day counter but I saw the one that you were using and thought that was way cool and wanted to do it... If you like you can pm me on msn messenger my email addy is heffe2002@hotmail.com
There I will either give you my phone number or you can give me yours I have free longdistance.... so no biggie on my end...

Thanks
Jeff Ines



heffe55 -> RE: Need Elapsed Time Java Script (2/7/2005 19:22:00)

if you go to test page 1 that really shows what I would like to have on my home page where i have to manually type it in day by day...

but most of the time when i plug anyof this stuff in and hit save or view it i lose the html... it just disappears... Im sorry but im just frustrated been at this for the past few days... I have asked all my friends to help out... and they are just as lost as i am.... and some of them are good at writing code... and the code disapears for them too...

if you care to sign up to the website let me know and i will make you an assistant manager to the site which will allow you to go in and work on the code your self... if you do want to see what you can do please use test page 2.... Im sure that you know a lot more than i do...

Thanks
Jeff Ines



Larry M. -> RE: Need Elapsed Time Java Script (2/8/2005 9:13:41)

quote:

I really don't know........ I just know that its msn groups sites


Jeff,

Sorry, I don't know either. Apparently you're using free hosting space with a browser input design program unique to MSN. Maybe another OutFront forum member is familiar with this process.



heffe55 -> RE: Need Elapsed Time Java Script (2/9/2005 4:47:05)

yeah thats what im thinking right now..... anyone know a simple html code that just counts down the days...??? anyone... please...

If you can hellp please do...

Thanks
Jeff Ines



Larry M. -> RE: Need Elapsed Time Java Script (2/9/2005 8:04:42)

quote:

anyone know a simple html code that just counts down the days...???


Jeff,

Here you go: http://javascript.internet.com/clocks/digital-countdown.html#source

I gather it's not finding the script that's the problem but inserting it. Follow the 3 steps carefully[;)] If you can't access the MSN code I don't see how this or any other direct HTML manipulation can work[:'(]



dpf -> RE: Need Elapsed Time Java Script (2/9/2005 9:32:33)

quote:

simple html code
html is not capable of doing that - Larry has you on the right track with javascript



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.125