www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] time of day picture change

  1. #1
    Join Date
    Nov 2011
    Posts
    2

    resolved [RESOLVED] time of day picture change

    Hello! im new to JavaScript and im trying to learn by modifying existing scripts.

    Im trying this one:
    http://www.javascriptsource.com/time...re-change.html

    I want it so that the picture changes every hour.

    and ive changed the code so it looks like this:


    Code:
    function pixTimeChange() {
      var t=new Date();
      var h = t.getHours();
      var r1="0100.jpg";
      var r2="0200.jpg";
      var r3="0300.jpg";
      var r4="0400.jpg";
      var r5="0500.jpg";
      var r6="0600.jpg";
      var r7="0700.jpg";
      var r8="0800.jpg";
      var r9="0900.jpg";
      var r10="1000.jpg";
      var r11="1100.jpg";
      var r12="1200.jpg";
      var r13="1300.jpg";
      var r14="1400.jpg";
      var r15="1500.jpg";
      var r16="1600.jpg";
      var r17="1700.jpg";
      var r18="1800.jpg";
      var r19="1900.jpg";
      var r20="2000.jpg";
      var r21="2100.jpg";
      var r22="2200.jpg";
      var r23="2300.jpg";
      var r24="2400.jpg";
      var el=document.getElementById('myimage');
    
      // See the time below. Note: The time is in 24 hour format.
      // In the example here, "7" = 7 AM; "17" =5PM.
      el.src = (h>=1 && h<2) ? r1 : r2;
      el.src = (h>=2 && h<3) ? r2 : r3;
      el.src = (h>=3 && h<4) ? r3 : r4;
      el.src = (h>=4 && h<5) ? r4 : r5;
      el.src = (h>=5 && h<6) ? r5 : r6;
      el.src = (h>=6 && h<7) ? r6 : r7;
      el.src = (h>=7 && h<8) ? r7 : r8;
      el.src = (h>=8 && h<9) ? r8 : r9;
      el.src = (h>=9 && h<10) ? r9 : r10;
      el.src = (h>=10 && h<11) ? r10 : r11;
      el.src = (h>=11 && h<12) ? r11 : r12;
      el.src = (h>=12 && h<13) ? r12 : r13;
      el.src = (h>=13 && h<14) ? r13 : r14;
      el.src = (h>=14 && h<15) ? r14 : r15;
      el.src = (h>=15 && h<16) ? r15 : r16;
      el.src = (h>=16 && h<17) ? r16 : r17;
      el.src = (h>=17 && h<18) ? r17 : r18;
      el.src = (h>=18 && h<19) ? r18 : r19;
      el.src = (h>=19 && h<20) ? r19 : r20;
      el.src = (h>=20 && h<21) ? r20 : r21;
      el.src = (h>=21 && h<22) ? r21 : r22;
      el.src = (h>=22 && h<23) ? r22 : r23;
      el.src = (h>=23 && h<24) ? r23 : r24;
      el.src = (h>=24 && h<01) ? r24 : r1;
    }
    but it only wievs the 0100.jpg image...

    what am i doing wrong?

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Rename 2400.jpg to 0000.jpg, then this is all you need:
    Code:
    <img.src='0000.jpg' id='myimage'> <!-- Put script somewhere BELOW here -->
    
    
    <script type='text/javascript'>
      
    (function( elemId )
    {
      var img = document.getElementById( elemId );  
          
      function f()
      {
        var hrs = new Date().getHours();   
          
        img.src = ( hrs < 10 ? '0' : '' ) + hrs + '00.jpg' ;
        
        setTimeout( f, 60000 );
      }
      
      f();
      
    })( 'myimage' );
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Lightbulb Consider this ...

    In military time, there is no such value as '24:00', it become '00:00'
    But you can name the image whatever you want.

    Consider this shortened code...
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=253363
    
    var baseURL = '';  // set this to the directory where the images are located
    var hourImages = [
      '2400.jpg',
      '0100.jpg','0200.jpg','0300.jpg','0400.jpg',
      '0500.jpg','0600.jpg','0700.jpg','0800.jpg',
      '0900.jpg','1000.jpg','1100.jpg','1200.jpg',
      '1300.jpg','1400.jpg','1500.jpg','1600.jpg',
      '1700.jpg','1800.jpg','1900.jpg','2000.jpg',
      '2100.jpg','2200.jpg','2300.jpg'            // Note: NO COMMA after last entry
    // ,'2400.jpg' // No such military time entry, hence the moving to 1st element 
    ];
    function pixTimeChange() {
      var t=new Date();
      var h = t.getHours();
      document.getElementById('myimage').src = baseURL+hourImages[h];
      document.getElementById('myimage').alt = hourImages[h];
    }
    window.onload = function() {
      pixTimeChange();
    }
    </script>
    
    </head>
    <body>
    <img id="myimage" src="" alt="">
    </body>
    </html>
    Last edited by JMRKER; 11-12-2011 at 08:15 AM. Reason: DANG..."Logic Ali" type faster than me!

  4. #4
    Join Date
    Nov 2011
    Posts
    2
    oh! right! its 00:00 not 24:00...

    Thanks guys! this works great now, and i understand a bit more

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    You're most welcome, I'm sure, from both of us.
    Happy to help.
    Good Luck!


    PS: Mark thread as resolved if you are satisfied with solutions provided.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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



Recent Articles