Trying to change the border color based on the opening hours. For example, green border from 10am to 9:29pm, yellow from 9:30pm to 9:44pm, and orange from 9:45pm until closing at 10pm. The issue is that the colors change at incorrect times beyond midnight. Are the conditions for changing colors correct?
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOff.png';
imgArray[1] = new Image();
imgArray[1].src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/Gifs/OpenLightOn.gif';
.
.
.(remaining code)
.
.
.
/* CSS styles */
.OpenGreen {
position:relative;
box-shadow: 0px 0px 3px 4px #3DFF01;
animation: Open 1s infinite;
}
@keyframes Open {
50%{box-shadow: 0px 0px 3px 4px #30cc00;}
}
// More CSS styles...
[id^="timeBorder"] {
border-radius:20px;
margin-left:auto;
margin-right:auto;
margin-top:8px;
bottom:5px;
display:block;
position:relative;
padding:0px;
width:182px;
height:182px;
z-index:1;
overflow:hidden;
}
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
[id ^="timeDiv"]
{
.
.
.(more CSS styles)
.
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="timeBorder3"><center><div id="timeDiv3"></div></center></div>