0
我试图改变边界的颜色，直到其关闭为止。例如：开放时间为上午10点，边界为绿色，直到晚上9点29分，然后从晚上9点30分至下午9点44分变成黄色，然后从下午9点45分开始变成橙色，直到晚上10点结束。我遇到的问题是颜色在11:29 pm到11:44黄色等等，直到十二点红色。我的问题是。我把我的其他权利或等于小时和分钟如何根据时间更改边框颜色
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';
var now = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var today = weekday[now.getDay()];
var dayOfWeek = now.getDay();
var checkTime3 = function() {
var timeBorder3 = document.getElementById('timeBorder3');
var timeDiv3 = document.getElementById('timeDiv3');
var hour = now.getHours();
var minutes = now.getMinutes();
var suffix = hour >= 12 ? "PM" : "AM"; //add AM or PM
// add 0 to one digit minutes
if (minutes < 10) {
minutes = "0" + minutes
};
if (dayOfWeek == 0 || dayOfWeek == 1 || dayOfWeek == 2 || dayOfWeek == 3 || dayOfWeek == 4) {
\t //Open Greeen:Sunday, Monday, Tuesday, Wednesday, Thursday
\t if ((dayOfWeek == 0 || dayOfWeek == 1 || dayOfWeek == 2 || dayOfWeek == 3 || dayOfWeek == 4) && hour > 9 && (hour > 21 == minutes < 30)) {
hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
\t timeBorder3.className = 'OpenGreen';
timeDiv3.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br><center><img style="width:100%;top:0px;border-radius:10px;" src='+imgArray[1].src+'></center>';
timeDiv3.className = 'open';
}
//Open Yellow:Sunday, Monday, Tuesday, Wednesday, Thursday
else if ((dayOfWeek == 0 || dayOfWeek == 1 || dayOfWeek == 2 || dayOfWeek == 3 || dayOfWeek == 4) && hour > 9 && (hour > 21 == minutes < 45)) {
hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
\t timeBorder3.className = 'OpenYellow';
timeDiv3.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br><center><img style="width:100%;top:0px;border-radius:10px;" src='+imgArray[1].src+'></center>';
timeDiv3.className = 'openYellow';
}
//Open Orange:Sunday, Monday, Tuesday, Wednesday, Thursday
else if ((dayOfWeek == 0 || dayOfWeek == 1 || dayOfWeek == 2 || dayOfWeek == 3 || dayOfWeek == 4) && hour > 9 && (hour > 21 == minutes < 60)) {
hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
\t timeBorder3.className = 'OpenOrange';
timeDiv3.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br><center><img style="width:100%;top:0px;border-radius:10px;" src='+imgArray[1].src+'></center>';
timeDiv3.className = 'openOrange';
}
//Closed
else {
if (hour == 0 || hour > 10) {
hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
}
\t timeBorder3.className = 'closedRed';
timeDiv3.innerHTML = 'It\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br><center><img style="width:100%;top:0px;border-radius:10px;" src='+imgArray[0].src+'></center>';
timeDiv3.className = 'closed';
}
}
//Open Green: Friday And Saturday
else if ((dayOfWeek == 5 || dayOfWeek == 6) && hour > 9 || (hour > 22 == minutes < 30)) {
hour = ((hour + 11) % 12 + 1);
\t timeBorder3.className = 'OpenGreen';
timeDiv3.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br><center><img style="width:100%;top:0px;border-radius:10px;" src='+imgArray[1].src+'></center>';
timeDiv3.className = 'open';
}
//Open Yellow: Friday And Saturday
else if ((dayOfWeek == 5 || dayOfWeek == 6) && hour > 9 || (hour > 22 == minutes < 45)) {
hour = ((hour + 11) % 12 + 1);
\t timeBorder3.className = 'OpenYellow';
timeDiv3.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br><center><img style="width:100%;top:0px;border-radius:10px;" src='+imgArray[1].src+'></center>';
timeDiv3.className = 'openYellow';
}
//Open Orange: Friday And Saturday
else if ((dayOfWeek == 5 || dayOfWeek == 6) && hour > 9 || (hour > 22 == minutes < 59)) {
hour = ((hour + 11) % 12 + 1);
\t timeBorder3.className = 'OpenOrange';
timeDiv3.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br><center><img style="width:100%;top:0px;border-radius:10px;" src='+imgArray[1].src+'></center>';
timeDiv3.className = 'openOrange';
}
//Closed
else {
if (hour == 0 || hour > 10) {
hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
}
\t timeBorder3.className = 'closedRed';
timeDiv3.innerHTML = 'It\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br><center><img style="width:100%;top:0px;border-radius:10px;" src='+imgArray[0].src+'></center>';
timeDiv3.className = 'closed';
}
};
$(function() {
checkTime3();
});/*timee*/
/*Borer of DIV Green*/
.OpenGreen {
position:relative;
box-shadow: 0px 0px 3px 4px #3DFF01;
animation: Open 1s infinite;
}
@keyframes Open {
\t 50%{box-shadow: 0px 0px 3px 4px #30cc00;}
}
/*Font Color Yellow*/
.openYellow {
position:relative;
color:yellow;
}
/*Border Of DIV Yellow*/
.OpenYellow {
position:relative;
box-shadow: 0px 0px 3px 4px #ffff00;
animation: openYellow 1s infinite;
}
@keyframes openYellow {
\t 50%{box-shadow: 0px 0px 3px 4px #FFE700;}
}
/*Font Color Orange*/
.openOrange {
position:relative;
color:#ff6700;
}
/*Border Of DIV Orange*/
.OpenOrange {
position:relative;
box-shadow: 0px 0px 3px 4px #ff6700;
animation: openOrange 1s infinite;
}
@keyframes openOrange {
\t 50%{box-shadow: 0px 0px 3px 4px #FF5A00;}
}
/*Font Color Red*/
.closed {
color: rgba(231, 76, 60, 0.85);
}
/*Border Of DIV Red*/
.closedRed {
position:relative;
box-shadow: 0px 0px 3px 4px #FF0101;
animation: close 1s infinite;
}
@keyframes close {
\t 50%{box-shadow: 0px 0px 3px 4px #e50000;}
}
[id^="timeBorder"] {
\t border-radius:20px;
\t margin-left:auto;
margin-right:auto;
\t margin-top:8px;
\t bottom:5px;
\t display:block;
\t position:relative;
\t padding:0px;
width:182px;
\t height:182px;
\t z-index:1;
\t overflow:hidden;
}
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
[id ^="timeDiv"]
{
width:100%;
background: transparent;
margin: 0 auto;
border-radius: 3px;
/* -webkit-box-shadow: 0 8px 16px -8px #adadad;
-moz-box-shadow: 0 8px 16px -8px #adadad;
box-shadow: 0 8px 16px -8px #adadad;*/
display:block;
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}
/*time end*/<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>
使用jQuery'setInterval'功能来做到这一点，通过生成随机颜色内设置边框的颜色... –