javascript - 如何根据时间更改边框颜色

Question

我正在尝试更改边框的颜色，直到它打开为止。例如:它在上午 10 点打开，直到晚上 9:29 之前边框都是绿色的，然后从晚上 9:30 到晚上 9:44 变为黄色，然后从晚上 9:45 变为橙色，直到晚上 10 点关闭。我遇到的问题是颜色在晚上 11:29 到 11:44 变成黄色，依此类推，直到十二点变成红色。我的问题是。我是把 else 放对了还是等于小时和分钟

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 ) {
	   //Open Greeen:Sunday, Monday, Tuesday, Wednesday, Thursday
	      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
	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
	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
	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
    }
	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);
	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);
	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);
	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
    }
	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 {
	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 {
	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 {
	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 {
	50%{box-shadow: 0px 0px 3px 4px #e50000;}
}

[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"]
 {


  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>

Answer 1

我认为你的问题在这里:

(hour > 22 == minutes < 59)

不知道有没有这样的语法

小时 > 22 如何等于分钟 < 59 ？

如果我错了，请纠正我。