Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Display Text Based on the Time (hours AND minutes)

    Hello

    I am trying to do something similar to this post Javascript, print text that changes based on what the time is.

    except I need it to be dependent on the hour and minute.

    Background:
    I am trying to create a schedule website, the schedule has say 20 items and I want it to display the current "active" event in the schedule, 1 previous event and 3 future events so a total of 5 items from the schedule.

    An event can range from 30 minutes to 2 hours long, so simply using the above code will not work. It needs to take the minutes into consideration as well.

    Let me know if you have additional questions.

    EDIT: 17-Mar-12 @ 12:37PM
    I would rather not use a bunch of if statements. (Change text based on time of day) The schedule could change mid day so having to go through and edit a bunch of if statements would not be ideal
    Last edited by belzinga; 03-17-2012 at 06:38 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <span id="message" ></span>
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    
    ShowMessage={
    
     init:function(o){
      var id=o.MessageID,obj=document.getElementById(id);
      if (obj){
       this[id]={
        obj:obj,
        ary:o.ScheduleArray
       }
       ShowMessage.update(id);
      }
     },
    
     update:function(id){
      var ary=this[id].ary,today=new Date(),y=today.getFullYear(),m=today.getMonth(),d=today.getDate(),mess='',z0;
      for (var z0=0;z0<ary.length;z0++){
       if (today>new Date(y,m,d,ary[z0][1][0],ary[z0][1][1])&&today<new Date(y,m,d,ary[z0][2][0],ary[z0][2][1])){
        mess=ary[z0][0];
        break;
       }
      }
      this[id].obj.innerHTML=mess;
      this[id].to=setTimeout(function(){ ShowMessage.update(id); },1000);
    
     }
    
    
    }
    
    ShowMessage.init({
     MessageID:'message',
     ScheduleArray:[
      ['message 1',[17,30],[18,00]],
      ['message 2',[18,00],[19,30]]
     ]
    });
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    belzinga (03-17-2012)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Another solution allows multiple messages to be shown if scheduled times overlap.

    Rather than hours and minutes I prefer to use hours and decimal fractions of an hour. (19:15 becomes 19.25)

    Code:
    <html>
    <head>
    </head>
    <body onload = "show()">
    <div id = "mymessage">No message at the present time</div>
    
    <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',[17.5],[18]],  // 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;
    }
    }
    
    }
    
    </script>
    
    </body>
    </html>

    Spotted in a toilet in a London office block: TOILET OUT OF ORDER. PLEASE USE FLOOR BELOW

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    belzinga (03-17-2012)

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hello vwphillips!

    Thank you!! It is more complicated than I was expecting but it does the job and I have figured out how to 'scale' to include the 5 items. Thank you!

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Philip, you were posting your as I posted my thanks!

    Thank you as well!

  • #6
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hello,

    I found this thread and I'm looking for something simular. I want to have a clock on my website that shows the current time and after a specific time display a message

    Something like this:

    Lets say its 11:00 and I want to show a message at 12:30 but I also want to see how much time left till 12:30.

    Truck 1 is leaving in 01:30 hours

    @ 12:30 Truck 1 has left

    @ 12:31 Truck 2 is leaving in 2:30 hours

    @ 15:00 Truck 2 has left

    Something like that with a clock that is ticking 24/7 and I want to loop this every day. Is there someone that can help me out with this because I know what I want but dont know how

    Tnx for any help
    Last edited by Joepiooo; 06-07-2012 at 10:11 AM.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    I would have thought that the script I offered in Post#3 would meet your needs if you make the message "Truck 1 will leave at 12:30".
    Make the script run every minute with:-

    Code:
    <body onload = "show(); setInterval(show,60000)">
    One minute is .016666 of an hour.

    Apart from that all you need to do is add another script to display the current time.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    function startTime() {
    showTime();
    t = setInterval('showTime()',1000);
    }
    
    function showTime() {
    var today=new Date();
    var hrs=today.getUTCHours();
    var mins=today.getUTCMinutes();
    var secs=today.getUTCSeconds();
    // add a zero in front of numbers < 10
    hrs = checkTime(hrs);
    mins=checkTime(mins);
    document.getElementById('txt').innerHTML=hrs+":"+mins;
    }
    
    function checkTime(i) {
    if (i<10) {
    i="0" + i;
    }
    return i;
    }
    
    </script>
    </head>
    
    <body onload="startTime()">
    <div id="txt"></div>
    </body>
    </html>
    If all this is insufficient, then as it appears to be a commercial site I suggest you pay a programmer to do the job.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 06-07-2012 at 10:32 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi,

    Thank you very much for this info

    It is not for a commercial website it was just an example... did not know how else to explain (sorry for the bad english).

    I tried this to combine but it doesnt seem to work... When I display the time the other function wont work

    Can you help me out?

  • #9
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    0
    Thanked 1 Time in 1 Post
    Ok now I got this:

    Code:
    		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.6]],  // 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;
    }
    Code:
    <body onload="startTime(); show(); setInterval(show,60000)">
    Code:
    <div id="txt"></div>
    <div id = "mymessage">No message at the present time</div>
    But it doesnt update my message automaticly... I have to refresh my page and then it is updated. How can I update is automatic?

    And how can I set a time like 12:23?

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    As I say, make the script run every minute with:-

    Code:
    <body onload = "show(); setInterval(show,60000)">
    You may not have more than one <body onload> statement. So you need to add startTime(). Another way to fire a set of functions when the page loads:-

    Code:
    <script type="text/javascript">
    window.onload = function() {
    show();
    startTime();
    setInterval(show,60000);
    }
    </script>
    23 minutes is .38333 of an hour. So 12:23 is 12.38333 hrs

    Get the first script running to your satisfaction before you try to add another one.
    Last edited by Philip M; 06-07-2012 at 12:29 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    0
    Thanked 1 Time in 1 Post
    Ok i tried the function you suggested but doesnt seem to work.

    I removed my onload in the body and used this function:

    Code:
    window.onload = function() {
    show();
    startTime();
    setInterval(show,10000);
    }
    It does not refresh anything until I do it myself...

    Pffff

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Get the first script running to your satisfaction before you try to add another one.

    This test version proves that the script works and (here) updates every 2 seconds:-

    Code:
    <html>
    <head>
    </head>
    
    <body onload = "show(); setInterval(show,2000)">
    <div id = "mymessage">No message at the present time</div>
    
    <script type = "text/javascript">
    var counter = 0;
    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',[2.5],[18]],  // 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]  + "  "  + counter + "<br>";
    counter ++;
    document.getElementById("mymessage").innerHTML = themessage;
    }
    }
    
    }
    
    </script>
    
    </body>
    </html>
    Last edited by Philip M; 06-07-2012 at 04:01 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •