Trying to learn just some basics

**jroussel** · 06-30-2005 05:33 PM

I have a simple javascript for making an odometer hit every .9 seconds starting at the beggining of the year only I'm not sure how to call it up. this is what my code looks like so far. Can anyone tell me what i need to do next?

</head>

<script language="JavaScript">
</script>

<body>

</body>

</html>

**evlich** · 07-01-2005 11:55 AM

You should probably put this code in the body of your document. Try somethign like this:

Code:

</head>

<script language="JavaScript"><!--
function getAccidentsThisYear() {
  var yourDate = new Date();
  var yourBaseYear = new Date().getYear();
  var yearDifference = (yourBaseYear - 1970); // The 'Epoch' date
  return (Math.round(((yourDate.getTime()/1000) - (yearDifference * 31536000)) * .9));
  
}

//-->
</script>

<body>
<script language="JavaScript"><!--
document.write("Accidents since New Years: " + getAccidentsThisYear());
-->
</script>
</body>
</html>

Hopefully this will help. You might want to Math.floor or Math.ceil, or Math.round it so that you get an integer back instead of a fraction.

**jroussel** · 07-12-2005 03:07 PM

I've got it to work and now I need to design an odometerstyle I have 20 number gifs, 10 black background that are named odo_gif_6.gif etc... and I have ten white ones that are named white_odo_gif_6.gif etc... I think that my next step is to set up 8 different arrays since i need the total number to be 8 digits. I could really use some help with this one. I don't know where to begin.
http://www.accidentscenecamera.com
its the second script on the home page that i need to format.

**evlich** · 07-12-2005 06:11 PM

I would start with a basic function for making a number 8 digits:

Code:

function make8Digits(number) {
  str = new String(number);
  while( str.length < 8 ) {
    str = "0" + str;
  }
  return str;
}

Then I would get a function to change images on the page for example:

Code:

// img_prefix is the image prefix (e.g. "white_odo_gif_")
// ent_prefix is the prefix to the name_attribute
// number is the number that you want to display.
function updateImages(img_prefix,ent_prefix,number) {
  str = make8Digits(number%100000000); // the mod keeps the number 8 digits or less
  for(i = 0; i < 8; i++) {
    document.images[ent_prefix+i].src = img_prefix + str.charAt(i) + ".gif"
  }
}

Then you can call this function instead of updating the text. Your page would then look something like this:

Code:

<img name="white_odom_0" src="white_odo_gif_0.gif" />
<img name="white_odom_1" src="white_odo_gif_0.gif" />
<img name="white_odom_2" src="white_odo_gif_0.gif" />
<img name="white_odom_3" src="white_odo_gif_0.gif" />
<img name="white_odom_4" src="white_odo_gif_0.gif" />
<img name="white_odom_5" src="white_odo_gif_0.gif" />
<img name="white_odom_6" src="white_odo_gif_0.gif" />
<img name="white_odom_7" src="white_odo_gif_0.gif" />

// To update the number you would call
updateImages("white_odo_gif_", "white_odom_", 100);
// where 100 is the new number to display

Hopefully this helps. I didn't try running it, but it should be pretty close to working.

**jroussel** · 07-13-2005 11:23 AM

Originally Posted by evlich

I would start with a basic function for making a number 8 digits:

Code:

function make8Digits(number) {
  str = new String(number);
  while( str.length < 8 ) {
    str = "0" + str;
  }
  return str;
}

Does this function need to be included in the original script or does the body script need to be included in this function. Sorry if this doesn't make sense. Basically I need to know how to tie it into the script I already have.

**evlich** · 07-13-2005 11:59 AM

You will call something like this:

Code:

// To update the number you would call
updateImages("white_odo_gif_", "white_odom_",getAccidentsThisYear());

All of these functions should be placed in the <head> tag, or, what would be even better would be in an external javascript file which your page references.

**jroussel** · 07-13-2005 03:26 PM

Sorry Im just trying to chew this up. Like I said I'm a big time javascript newbie.

This is what I have so far. And I'm getting an error.
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>

<script type="text/javascript">
function make8Digits(getaccidents()) {
str = new String(getaccidents());
while( str.length < 8 ) {
str = "0" + str;
}
return str;
}

</script>

</head>

<body>
<script type="text/javascript">

</script>
<span id="myAccidents" name="myAccidents"></span>
<script language="JavaScript">

</script>

</body>

</html>

**jroussel** · 07-13-2005 03:59 PM

Ok I was able to add the first function without error into the head. Thanks for your help, by the way.

**jroussel** · 07-14-2005 04:02 PM

// img_prefix is the image prefix (e.g. "white_odo_gif_")
// ent_prefix is the prefix to the name_attribute
// number is the number that you want to display.
function updateImages(img_prefix,ent_prefix,number) {
str = make8Digits(number%100000000); // the mod keeps the number 8 digits or less
for(i = 0; i < 8; i++) {
document.images[ent_prefix+i].src = img_prefix + str.charAt(i) + ".gif"
}
}

This is the part I'm having trouble with. "(img_prefix,ent_prefix,number)"
should i be replacing "img_prefix" with "white_odo_gif_", and should I replace "number" with "getaccidents()". Also how does the function distinguish to display white_odo_gif_4.gif for the second digit in the string (if its four). One more question, does this function need to be duplicated for every digit in the string.

**evlich** · 07-14-2005 05:06 PM

Code:

// img_prefix is the image prefix (e.g. "white_odo_gif_")
// ent_prefix is the prefix to the name_attribute
// number is the number that you want to display.
function updateImages(img_prefix,ent_prefix,number) {
  str = make8Digits(number%100000000); // the mod keeps the number 8 digits or less
  for(i = 0; i < 8; i++) {
    document.images[ent_prefix+i].src = img_prefix + str.charAt(i) + ".gif"
  }
}

First of all, this is a function (designated by the keyword 'function'). The (img_prefix,ent_prefix,number) are the parameters to the function. So when you call updateImages("gif_", "white_odom_", 100), img_prefix will have the value of "gif_", ent_prefix will have the value of "white_odom_" and number will have the value of 100. Functions are a very useful abstraction concept.

I coded something quick, I dont' have images, but you can test it.

Hope this helps.

**jroussel** · 07-14-2005 08:29 PM

Thanks,
That looks a lot simpler than i thought it would. You'll notice it displays all zeros for a second and then goes. We're close though. Check it out. http://www.accidentscenecamera.com/odometer.htm

**jroussel** · 07-20-2005 06:42 PM

Still need your help. Dont give up. Most of my friends do vb stuff, not much help.

**evlich** · 07-20-2005 06:55 PM

Sorry, I didn't even notice the post. Try changing the doTimeout to:

Code:

function doTimeout() {
  updateImages('images/white_odo_gif_','white_odom_',getAccidentsThisYear());
  setTimeout("doTimeout()", 5000);
}

I am guessing that the images are in the subdirectory images/ so you need to specify that.

If this doesn't work. Post another.

**jroussel** · 07-22-2005 10:40 AM

the numbers are showing up right but i get a microsoft caution box that tells me the number every few seconds. If you want to check it out it should show up at http://www.accidentscenecamera.com/odometer.htm

**evlich** · 07-22-2005 11:38 AM

That is because there is still some debug code in there. In the updateImages() function, the alert(str); needs to be removed.

Code:

function updateImages(img_prefix,ent_prefix,number) {
  str = make8Digits(number%100000000); // the mod keeps the number 8 digits or less
  for(i = 0; i < 8; i++) {
    document.getElementById(ent_prefix+''+i).src = img_prefix + str.charAt(i) + ".gif"
  }
}

Hope this helps.

Thread: Trying to learn just some basics

Thread Tools

Display

Trying to learn just some basics

Thanks for all your help.

Bookmarks

Bookmarks

Posting Permissions