www.webdeveloper.com
Results 1 to 5 of 5

Thread: Display Text Based on the Time (hours AND minutes) with clock and countdown

  1. #1
    Join Date
    Jun 2012
    Posts
    23

    Display Text Based on the Time (hours AND minutes) with clock and countdown

    Hi

    I now got something like this:

    Code:
            <script type="text/javascript">
    		
    		function show() {
    var nowhrs = new Date().getHours();
    var nowmins = new Date().getMinutes();
    var hrsmins = nowhrs + (nowmins/60);  // decimals of an hour
    
    var schedule = [
    ['Message 1',[12],[12.7]],  // times are expressed as hours + decimals of an hour, e.g. 30 minutes is .5 hours.
    ['Message 2',[18],[21.5]],
    ['Message 3',[19.5],[20.25]]
    ]
    
    var themessage = "";
    for (var i =0; i <schedule.length; i++) {
    if ((hrsmins >= schedule[i][1]) && (hrsmins < schedule[i][2])) {
    themessage += schedule[i][0]  + "<br>";
    document.getElementById("mymessage").innerHTML = themessage;
    }
    }
    
    }
    
    function startTime() {
    showTime();
    t = setInterval('showTime()',1000);
    }
    
    function showTime() {
    var today=new Date();
    var hrs=today.getHours();
    var mins=today.getMinutes();
    var secs=today.getSeconds();
    // add a zero in front of numbers < 10
    hrs = checkTime(hrs);
    mins=checkTime(mins);
    document.getElementById('txt').innerHTML=hrs+":"+mins+":"+secs;
    }
    
    function checkTime(j) {
    if (j<10) {
    j="0" + j;
    }
    return j;
    }
    
    </script>
    This to load it:

    Code:
    <body onload="startTime(); show(); setInterval(show,60000)">
    And this to show it:

    Code:
    <div id="txt"></div>
    <div id = "mymessage">No message at the present time</div>
    The current time is working and after a certain time when I refresh my page the message is updated. But I want that it updates automatic after a certain time...

    The interval is not working. Can somebody help me out?

    And I got another question too

    Is it possible that I have a count down too?

    When I set a message on a time and for example the message is shown in an hour it displays : The message wil be shown in 00:59:50.

    Thank for any help

  2. #2
    Join Date
    Mar 2011
    Posts
    1,252
    Add
    Code:
    setInterval(show, 60000);
    at the end of the function show() so that it will repeat automatically. And remove the call to setInterval() from the <body> 'onload' attribute because it would no longer be needed.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jun 2012
    Posts
    23
    Hi,

    Tnx for your answer but that doesnt work either... My firefox is crashing when I use that. Any other solutions? Cant I just refresh the div only?

  4. #4
    Join Date
    Mar 2011
    Posts
    1,252
    This should give you a start:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>WebDeveloper.com Timer</title>
    <script type="text/javascript">
    
    var timeoutID;
    	
    function show() {
     var nowhrs = new Date().getHours();
     var nowmins = new Date().getMinutes();
     var hrsmins = nowhrs + (nowmins/60);  // decimals of an hour
    
     var schedule = [
      ['Message 1',[12],[12.7]],  // times are expressed as hours + decimals of an hour, e.g. 30 minutes is .5 hours.
     ['Message 2',[18],[21.5]],
     ['Message 3',[19.5],[20.25]]
     ];
    
    var themessage = "";
     for (var i =0; i <schedule.length; i++) {
      if ((hrsmins >= schedule[i][1]) && (hrsmins < schedule[i][2])) {
       themessage += schedule[i][0]  + "<br>";
       document.getElementById("mymessage").innerHTML = themessage;
      } // endif
     } // end for i
     showTime();
     timeoutID = setTimeout('show()', 1000);
    } // end show()
    
    function showTime() {
     var today=new Date();
     var hrs=today.getHours();
     var mins=today.getMinutes();
     var secs=today.getSeconds();
      // add a zero in front of numbers < 10
     hrs = checkTime(hrs);
     mins=checkTime(mins);
     document.getElementById('txt').innerHTML=hrs+":"+mins+":"+secs;
    } // end showTime()
    
     function checkTime(j) {
      if (j<10) {
       j="0" + j;
      } // endif j
    return j;
     } // end checkTime()
    
    </script>
    </head>
    <body onload="show();">
    <h1 align="center">Timer</h1>
    <div id="txt"></div>
    <div id = "mymessage">No message at the present time</div>
    </body>
    </html>
    Last edited by rtrethewey; 06-07-2012 at 12:11 PM.
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,290
    A variant to learn to write the time in English...
    Code:
    <body>
    <p>At the openning of this page it was <span id="itis"></span>.</p>
    
    <script type="text/javascript">
    var nmb="null,one,two,three,four,five,six,seven,eight,nine,ten,eleven,twelve,thirteen,fourteen, quarter,sixteen,seventeen,eigthteen,nineteen,twenty".split(',');
    function whatTime(){var today=new Date();// to test "5 Jan 1996 11:55:00"
    	var h,hrs=(h=today.getHours())<13?h:h-12,mns=today.getMinutes(),s=' past ';
    	u='noon';if (h<6 || 18<h) u='midnigth';
    	if (30<mns) {s=' to ';mns=60-mns;hrs++;hrs%=12}  
    	var rsl=(mns<21?nmb[mns]:'twenty-'+nmb[mns-20])+s+nmb[hrs]; 
    	rsl=rsl.replace(/twenty-ten/,'half').replace(/null past ([\w]+)/,"$1 o'clock");
    	rsl=rsl.replace(/(null|twelve) o\'clock/,u).replace(/(null|twelve)/,u);
    	document.getElementById('itis').innerHTML=rsl;
    }
    whatTime();
    </script>
    </body>
    Last edited by 007Julien; 06-07-2012 at 02:21 PM. Reason: errors

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.36813 seconds
  • Memory Usage 2,884KB
  • 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
  • (6)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