You can put your PHP code back into this example, but I saw no particular need for it using JS only.
Note your logic can be vastly compressed with a bit of forethought...
The value of $h (hours) can only be withing the range of 0..23 in military time.
Therefore all you need to do is check for $h < hour starting a midnight and staying sequential.
Also, you only need to check for the day once and not each and every time.
Substitute your own path and image file names into the appropriate lines
and ask questions about the following logic if it does not make sense to you...
Code:
<html>
<head>
<title> DJ times </title>
</head>
<body>
<div id="DJtimes">
<img id="DJpix" src="" title='No show' alt="No show" style="font-size:3em; background-color:orange">
</div>
<script type="text/javascript">
function DJdisplay() {
var now = new Date();
var $d = now.getDay();
var $h = now.getHours(); // adjust for MST if necessary or use UTC time
// var $h = now.getMinutes(); // for testing purposes only before hh:24
var $year = now.getFullYear();
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/'; // change to: './images2/dj/images/
var $img = document.getElementById('DJpix');
/*
$h = date('G'); //set variable $h to the hour of the day
$d = date('w'); //set variable $d to the day of the week.
$year = date('Y'); //set variable $year to the current year
//G is the date key for hours in 24 format (not 12), with no leading 0s, like 02.
// Adjust 2 hour offset for MST below.
$h = $h+1;
*/
if ($d == 1) { // MONDAY SCHEDULE
if ($h < 4) $img.src = baseURL+''
else if ($h < 8) $img.src = baseURL+'11.jpg'
else if ($h < 12) $img.src = baseURL+'12.jpg'
else if ($h < 14) $img.src = baseURL+'13.jpg'
else if ($h < 16) $img.src = baseURL+'13.jpg'
else if ($h < 19) $img.src = baseURL+'14.jpg'
else if ($h >= 19) $img.src = baseURL+'15.jpg';
}
if ($d == 2) { // TUESDAY SCHEDULE
if ($h < 4) $img.src = baseURL+''
else if ($h < 8) $img.src = baseURL+'21.jpg'
else if ($h < 12) $img.src = baseURL+'22.jpg'
else if ($h < 13) $img.src = baseURL+'23.jpg'
else if ($h < 15) $img.src = baseURL+'23.jpg'
else if ($h < 17) $img.src = baseURL+'24.jpg'
else if ($h < 20) $img.src = baseURL+'25.jpg'
else if ($h >= 20) $img.src = baseURL+'21.jpg';
}
if ($d == 3) { // WEDNESDAY SCHEDULE
if ($h < 4) $img.src = baseURL+''
else if ($h < 8) $img.src = baseURL+'31.jpg'
else if ($h < 12) $img.src = baseURL+'32.jpg'
else if ($h < 13) $img.src = baseURL+'33.jpg'
else if ($h < 15) $img.src = baseURL+'33.jpg'
else if ($h < 17) $img.src = baseURL+'34.jpg'
else if ($h < 20) $img.src = baseURL+'35.jpg'
else if ($h >= 20) $img.src = baseURL+'31.jpg';
}
if ($d == 4 ) { // THURSDAY SCHEDULE
if ($h < 4) $img.src = baseURL+''
else if ($h < 8) $img.src = baseURL+'41.jpg'
else if ($h < 12) $img.src = baseURL+'42.jpg'
else if ($h < 13) $img.src = baseURL+'43.jpg'
else if ($h < 15) $img.src = baseURL+'43.jpg'
else if ($h < 17) $img.src = baseURL+'44.jpg'
else if ($h < 20) $img.src = baseURL+'45.jpg'
else if ($h >= 20) $img.src = baseURL+'41.jpg';
}
if ($d == 5) { // FRIDAY SCHEDULE
if ($h < 4) $img.src = baseURL+''
else if ($h < 8) $img.src = baseURL+'51.jpg'
else if ($h < 12) $img.src = baseURL+'52.jpg'
else if ($h < 13) $img.src = baseURL+'53.jpg'
else if ($h < 15) $img.src = baseURL+'53.jpg'
else if ($h < 17) $img.src = baseURL+'54.jpg'
else if ($h < 20) $img.src = baseURL+'55.jpg'
else if ($h >= 20) $img.src = baseURL+'51.jpg';
}
if ($d == 6) { // SATURDAY SCHEDULE
if ($h < 5) $img.src = baseURL+''
else if ($h < 8) $img.src = baseURL+'11.jpg'
else if ($h < 9) $img.src = baseURL+'21.jpg'
else if ($h < 10) $img.src = baseURL+'31.jpg'
else if ($h < 11) $img.src = baseURL+'41.jpg'
else if ($h < 12) $img.src = baseURL+'51.jpg'
else if ($h < 13) $img.src = baseURL+'11.jpg'
else if ($h < 14) $img.src = baseURL+'21.jpg'
else if ($h < 15) $img.src = baseURL+'31.jpg'
else if ($h < 17) $img.src = baseURL+'41.jpg'
else if ($h < 19) $img.src = baseURL+'51.jpg'
else if ($h < 22) $img.src = baseURL+'11.jpg'
else if ($h >= 22) $img.src = baseURL+'21.jpg';
}
if ($d == 0) { // SUNDAY SCHEDULE
if ($h < 2) $img.src = baseURL+''
else if ($h < 4) $img.src = baseURL+'11.jpg'
else if ($h < 5) $img.src = baseURL+'21.jpg'
else if ($h < 6) $img.src = baseURL+'31.jpg'
else if ($h < 8) $img.src = baseURL+'41.jpg'
else if ($h < 9) $img.src = baseURL+'51.jpg'
else if ($h < 10) $img.src = baseURL+'11.jpg'
else if ($h < 11) $img.src = baseURL+'21.jpg'
else if ($h < 12) $img.src = baseURL+'31.jpg'
else if ($h < 16) $img.src = baseURL+'41.jpg'
else if ($h < 17) $img.src = baseURL+'51.jpg'
else if ($h < 18) $img.src = baseURL+'11.jpg'
else if ($h < 19) $img.src = baseURL+'21.jpg'
else if ($h < 21) $img.src = baseURL+'31.jpg'
else if ($h >= 21) $img.src = baseURL+'41.jpg';
}
}
window.onload = function () {
DJdisplay();
var interval = 60*60*1000; // 1 hour checks
// var interval = 60*100; // 1 minute checks for testing purposes only
var t = setInterval("DJdisplay()",interval);
}
</script>
</body>
</html>