Let's see, this should work (does in moderate testing here). There might be a slight learning curve. I will explain the essentials, then - if there are any questions, please ask. First the code, please notice the highlighted part near the end:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Time Driven Events Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
// Time Driven Events Script (c)2014 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
var timedriver = {
setrange: function(strt, end, msg, action){
strt = strt.toString(10).split(':');
end = end.toString(10).split(':');
if (!(this.hrs >= strt[0] && this.hrs <= end[0])) {return;}
if (this.hrs == strt[0] && strt[1] && strt[1] < this.mns) {return;}
if (this.hrs == end[0] && end[1] && this.mns >= end[1]) {return;}
this.setmsgel();
if(this.msgel){
this.msgel.innerHTML = msg.join(this.h + ':' + this.m + this.suffix);
}
action && action();
},
setmsgel: function(){
return this.msgel || (this.msgel = document.getElementById(this.elid));
},
now : new Date(),
hours: function(){return this.h = this.hrs = this.now.getHours();},
mins: function(){return this.m = this.mns = this.now.getMinutes();},
ampm: function(){
this.suffix = this.hrs > 11? 'pm' : 'am';
this.h = this.hrs > 11? this.hrs - 12 : this.hrs;
this.m = this.mns > 9? this.mns : '0' + this.mns;
return this.suffix;
},
init: function(){
this.hours();
this.mins();
this.ampm();
return this;
}
};
</script>
</head>
<body>
<div id="timemsg"></div>
<script type="text/javascript">
var mytime = timedriver.init();
mytime.elid = 'timemsg';
mytime.setrange('0', '8', ["Good Morning! It's ", ", Up early, huh?"], function(){document.body.style.background = 'yellow';});
mytime.setrange('20', '21', ["Good Evening! It's ", ", Nice night, huh?"], function(){document.body.style.background = 'lightblue';});
mytime.setrange('22', '23:59', ["Good Night! It's ", ", Why are you still up?"], function(){document.body.style.background = 'blue';});
</script>
</body>
</html>
That (the highlighted) is what you will use (with modifications as desired) to accomplish your aims. Notice the red timemsg id for the div and how it's also used in the mytime.elid statement to tell the code the id of the element that you want the message to appear in.
Also please notice that you need to first initialize the code to a variable (in this example I've used - mytime). After that, anything else you do will be that variable.whatever, ex:
The real key here is that setrange command. It accepts a quoted start time in 24 hour notation. This can be in any of the normal formats, like 'h:mm', 'hh', 'hh:m', 'hh:mm', etc. Basically just hours, or hours and minutes separated by a colon. single or two digit hours may be used. same thing with the minutes (one or two digits as needed). Remember this is a string, so it must be quoted. This is when whatever you want to happen during this range of time begins. The next parameter is the end time. Same format as for start. It's when this range is no longer valid (if the current time is after or equal to end, this range will not execute). Next comes the message. It is an array with two members (before and after), ex:
Code:
["Good Evening! It's ", ", Nice night, huh?"]
You can have just a before:
Code:
["Good Evening! It's "]
or an empty before and just an after:
Code:
["", ", Nice night, huh?"]
What will be put in the 'middle' (location of the red comma, or at the end of a beginning only array) is the time in a format like:
10:01pm
Finally we have an action to perform. If there is none, nothing further will be done. If there is one, it must be a function, ex:
Code:
function(){document.body.style.background = 'blue';}
If you want to use a background image for the body of the page, that would be like:
Code:
function(){document.body.style.background = 'url: (myimage.jpg)';}
More complete instructions can be given, like positioning, repeat, etc. all according to the rules of css style and how they may be expressed in javascript. If you need further help with that - expressing just the sort of background - or anything else you might want in this function, just let me know.
Date with greetings
Reply With Quote
Originally Posted by james438
Bookmarks