홈>
테두리가 열릴 때까지 테두리의 색상을 변경하려고합니다. 예 : 오전 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>
- 답변 # 1
- 답변 # 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 }
관련 자료
- html - 호버시 CSS 테두리 색상을 변경할 수 없습니다
- python 3.x - Pandas의 다른 탭에서 일치에 따라 값 변경
- Sharepoint 웹 사이트의 섹션에 포함 된 Sharepoint 목록의 색상을 변경하는 방법
- delphi - VCL richedit, 단어 색상 변경 속도가 느림
- r - Data Explorer의 plot_missing () 함수에서 색상 및 밴드 레이블을 변경하는 방법
- pandas - 데이터 프레임 ACCORDING의 각 값을 원래 값으로 변경하는 더 빠른 방법
- python - Seriesreplace ()는 교체에 따라 dtype을 변경하지 않습니다
- jquery - 플라스크 wtforms에 오류가 발생할 때 부트 스트랩 양식 입력 필드의 테두리 색상을 어떻게 변경합니까?
- python - pltplot을 사용하여 서브 플롯 (matplotlib)의 그래프에서 선 색상을 어떻게 변경합니까?
- c# - Syncfusion MaskedTextBox의 테두리 색상을 변경할 수 없습니다
- python - 다른 테이블에 따라 텍스트 파일의 변수 변경
- reactjs - 활성화 된 탭의 측면 테두리 색상을 변경하는 방법
- php - 요일 변경 홈페이지 또는 결과에 따르면
- php - 버튼으로 데이터 내용 변경 (버튼 클릭에 따라 SQL ID 변경)
- javascript - Bokeh의 확인란을 사용하여 점 색상을 동적으로 변경하는 방법
- java - libgdx - 사용자 입력에 따라 png 색상 변경
- reactjs - 반응 구성 요소에서 색상을 변경하는 방법
- openlayers - 오픈 레이어의 투영에 따라 스케일 및 측정 변경 5
- VB.Net - vbnet - 패널의 테두리 색상 변경
- javascript - MaterialUI 슬라이더 값에 따라 이미지 변경
관련 질문
- javascript : Angular에서 입력 클릭 이벤트를 기반으로 페이지 위로 이동
- javascript : 내 웹 개발 code를 처리하는 데 어려움이 있습니다.
- javascript : RGB 값으로 회색 음영 얻기
- javascript : html, css, js로 onclick 이벤트를 어떻게 할 수 있습니까?
- javascript : 캔버스에서 버튼을 정렬하고 스타일을 지정하는 방법은 무엇입니까?
- javascript : 내 웹사이트의 모바일 버전 버거 버튼이 드롭다운되지 않음
- javascript : .click 토글 기능을 어떻게 재설정합니까?
- javascript : EventListener에서 JS 기본값을 깨는 함수 매개 변수
- JavaScript(DOM)를 사용하여 색상 변경
- javascript : 누구든지 배경색으로 캔버스 이미지를 저장하는 방법을 말해 줄 수 있습니까?
문제가 여기에 있다고 생각합니다 :
그런 문법이 있는지 모르겠습니다.
시간>22는 어떻게 분<59 일 수 있습니까?
잘못되면 바로 잡으세요.