...

View Full Version : Display Text Based on the Time (hours AND minutes)



belzinga
03-17-2012, 06:29 PM
Hello

I am trying to do something similar to this post http://www.codingforums.com/showthread.php?t=168903

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. (http://www.codingforums.com/showthread.php?t=250358) The schedule could change mid day so having to go through and edit a bunch of if statements would not be ideal

vwphillips
03-17-2012, 07:36 PM
<!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>

Philip M
03-17-2012, 08:53 PM
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)


<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

belzinga
03-17-2012, 08:56 PM
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!

belzinga
03-17-2012, 09:00 PM
Philip, you were posting your as I posted my thanks!

Thank you as well!

Joepiooo
06-07-2012, 10:02 AM
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:)

Philip M
06-07-2012, 10:22 AM
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:-


<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.



<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.

Joepiooo
06-07-2012, 11:06 AM
Hi,

Thank you very much for this info:)

It is not for a commercial website:D 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?

Joepiooo
06-07-2012, 11:38 AM
Ok now I got this:


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;
}


<body onload="startTime(); show(); setInterval(show,60000)">


<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?

Philip M
06-07-2012, 12:21 PM
As I say, make the script run every minute with:-


<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:-


<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.

Joepiooo
06-07-2012, 12:57 PM
Ok i tried the function you suggested but doesnt seem to work.

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


window.onload = function() {
show();
startTime();
setInterval(show,10000);
}

It does not refresh anything until I do it myself...

Pffff:(

Philip M
06-07-2012, 03:44 PM
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:-


<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum