홈>2020-02-01 01:19

javascript - 시간에 따라 테두리 색상을 변경하는 방법

테두리가 열릴 때까지 테두리의 색상을 변경하려고합니다. 예 : 오전 10시에 열리고 오후 9시 29 분까지 경계선이 녹색으로 변한 후 오후 9시 30 분부터 오후 9시 44 분까지 황색으로 변하고 오후 9시 45 분부터 오후 10 시까 지 마감 시간까지 주황색으로 바뀝니다. 내가 겪고있는 문제는 11시 29 분에서 11시 44 분까지 노란색으로 바뀌고 빨간색으로 12 시까 지 변하는 것입니다. 내 질문은 다른 것을 올바르게 또는 시간과 분과 동일하게 배치합니까?

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>

javascript html css

답변 # 1
문제가 여기에 있다고 생각합니다 :
```
(hour > 22 == minutes < 59)
```
그런 문법이 있는지 모르겠습니다.

시간>22는 어떻게 분<59 일 수 있습니까?

잘못되면 바로 잡으세요.

답변 # 2
아흐멧 카라 불트가 옳습니다.
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
}
```

Python2.net

javascript - 시간에 따라 테두리 색상을 변경하는 방법

관련 자료