Trying to learn just some basics


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Page 1 of 4 123 ... LastLast
Results 1 to 15 of 58

Thread: Trying to learn just some basics

  1. #1
    Join Date
    Jun 2005
    Posts
    34

    Trying to learn just some basics

    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"><!--
    var yourDate = new Date();
    var yourBaseYear = new Date().getYear();
    var yearDifference = (yourBaseYear - 1970); // The 'Epoch' date
    var secondsThisYear = (Math.round(((yourDate.getTime()/1000) - (yearDifference * 31536000)) * .9));
    document.write("Accidents since New Years: " + secondsThisYear);
    //-->
    </script>

    <body>

    </body>

    </html>

  2. #2
    Join Date
    Aug 2003
    Posts
    313
    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.
    ~evlich

  3. #3
    Join Date
    Jun 2005
    Posts
    34
    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.

  4. #4
    Join Date
    Aug 2003
    Posts
    313
    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.
    ~evlich

  5. #5
    Join Date
    Jun 2005
    Posts
    34
    Quote 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.

  6. #6
    Join Date
    Aug 2003
    Posts
    313
    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.
    ~evlich

  7. #7
    Join Date
    Jun 2005
    Posts
    34
    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">
    <!--
    function timingex(){
    setTimeout("getaccidents();",1000);
    }

    function getaccidents() {
    var yourDate = new Date();
    var yourBaseYear = new Date().getYear();
    var yearDifference = (yourBaseYear - 1970); // The 'Epoch' date
    var secondsThisYear = (Math.round(((yourDate.getTime()/1000) - (yearDifference * 31536000)) * 1.026569));

    document.getElementById("myAccidents").innerHTML = (secondsThisYear);
    timingex();
    }
    //-->
    </script>
    <span id="myAccidents" name="myAccidents"></span>
    <script language="JavaScript">
    <!--
    getaccidents();
    //-->
    </script>

    </body>

    </html>

  8. #8
    Join Date
    Jun 2005
    Posts
    34
    Ok I was able to add the first function without error into the head. Thanks for your help, by the way.

  9. #9
    Join Date
    Jun 2005
    Posts
    34
    // 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.

  10. #10
    Join Date
    Aug 2003
    Posts
    313
    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.
    Attached Files Attached Files
    ~evlich

  11. #11
    Join Date
    Jun 2005
    Posts
    34
    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

  12. #12
    Join Date
    Jun 2005
    Posts
    34
    Still need your help. Dont give up. Most of my friends do vb stuff, not much help.

  13. #13
    Join Date
    Aug 2003
    Posts
    313
    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.
    ~evlich

  14. #14
    Join Date
    Jun 2005
    Posts
    34

    Thanks for all your help.

    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

  15. #15
    Join Date
    Aug 2003
    Posts
    313
    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.
    ~evlich

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center