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

时间：2017-09-05 06:41:15

标签： javascript html css

我试图改变边框的颜色，直到它关闭。例如：它在上午10点打开，边界是绿色，直到晚上9点29分，然后从晚上9:30到晚上9:44变黄，然后从晚上9:45变为橙色，直到晚上10点关闭。我遇到的问题是颜色在11:29 pm变为11:44黄色，依此类推，直到十二点红色。我的问题是。我把别的正确或等于小时和分钟

＆＃13;
＆＃13; 
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();
});
＆＃13; 
/*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*/
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

我认为你的问题在这里：

(hour > 22 == minutes < 59)

我不知道是否有这样的语法。

小时怎么样＆gt; 22可以等于分钟＆lt; 59？

如果我错了，请纠正我。

答案 1 :(得分：0)

Ahmet Karabulut是对的。

您应该使用此if ((dayOfWeek == 0 || dayOfWeek == 1 || dayOfWeek == 2 || dayOfWeek == 3 || dayOfWeek == 4 ) && hour > 9 && (hour > 21 == minutes < 30))

而不是if (dayOfWeek >= 0 && dayOfWeek <= 4 && (hour > 22 && minutes < 59))

我纠正了我之前的回答。

编辑1：

这样的事情：

if (hour >= 9 && hour <= 23 && dayOfWeek >= 0 && dayOfWeek <= 4) {
  //make Stuff green
}else if (hour == 23 && dayOfWeek >= 0 && dayOfWeek <= 4) {
  if (minutes >= 45) {
    //make stuff Orange
  }else if (minutes >= 30) {
    //make stuff yellow
  }else {
  // make stuff red
}
相关问题
最新问题