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
    TX
    Posts
    7,946

    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 09: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
    TX
    Posts
    7,946
    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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.12236 seconds
  • Memory Usage 2,885KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (3)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (5)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (5)postbit
  • (5)postbit_onlinestatus
  • (5)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates