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,139
    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,139
    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,266
    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



Recent Articles