javascript - How to highlight the second time reference in my code -
var img = new image(); var = new date(); var weekday = new array(7); weekday[0] = "sunday"; //9:00 - 11:00 pm weekday[1] = "monday"; //11:00 - 11:00 pm weekday[2] = "tuesday"; //11:00 - 11:00 pm weekday[3] = "wednesday"; //11:00 - 11:00 pm weekday[4] = "thursday"; //11:00 - 11:00 pm weekday[5] = "friday"; //9:00 - 12:00 weekday[6] = "saturday"; //9:00 - 12:00 am var checktime6 = function() { var today = weekday[now.getday()]; var timediv6 = document.getelementbyid('timediv6'); var dayofweek = now.getday(); var hour = now.gethours(); var minutes = now.getminutes(); //add or pm var suffix = hour >= 12 ? "pm" : "am"; // add 0 1 digit minutes if (minutes < 10) { minutes = "0" + minutes }; if ((dayofweek == 0 || dayofweek == 1 || dayofweek == 2 || dayofweek == 3 || dayofweek == 4) && hour >= 9 && hour <= 22) { hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15 timediv6.innerhtml = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" />'; timediv6.classname = 'open'; img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/gifs/openlighton.gif'; } else if ((dayofweek == 5 || dayofweek == 6) && hour >= 9 && hour <= 23) { hour = ((hour + 11) % 12 + 1); timediv6.innerhtml = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" /></center>'; timediv6.classname = 'open'; img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/gifs/openlighton.gif'; } else { if (hour == 0 || hour > 9) { hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15 } timediv6.innerhtml = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" /></center>' ; timediv6.classname = 'closed'; img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/gifs/openlightoff.png'; } }; setinterval(checktime6, 1000); checktime6(); var checktime31 = function() { var today = weekday[now.getday()]; var timediv = document.getelementbyid('timediv31'); var dayofweek = now.getday(); var hour = now.gethours(); var minutes = now.getminutes(); //add or pm var suffix = hour >= 12 ? "pm" : "am"; // add 0 1 digit minutes if (minutes < 10) { minutes = "0" + minutes }; if ((dayofweek == 1 || dayofweek == 2 || dayofweek == 3 || dayofweek == 4 || dayofweek == 5) && hour >= 9 && hour <= 23) { hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15 timediv31.innerhtml = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" />'; timediv31.classname = 'open'; img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/gifs/openlighton.gif'; } else if ((dayofweek == 0 || dayofweek == 6) && hour >= 9 && hour <= 1) { hour = ((hour + 11) % 12 + 1); timediv31.innerhtml = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" /></center>'; timediv31.classname = 'open'; img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/gifs/openlighton.gif'; } else { if (hour == 0 || hour > 9) { hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15 } timediv31.innerhtml = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '<br/><center><img style="width:150px;top:0px;border-radius:10px;" src="'+img.src+'" /></center>' ; timediv31.classname = 'closed'; img.src = 'http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/599346900698327146/files/gifs/openlightoff.png'; } }; setinterval(checktime31, 1000); checktime31(); var currentday = weekday[now.getday()]; var currentdayid = "#" + currentday; //gets todays weekday , turns id $(currentdayid).toggleclass("today"); //hightlights today in view hours modal popup/*timee*/ .timebox1{ position:fixed; display:block; padding:0px; top:10px; left:10px; } .timebox2{ position:fixed; display:block; padding:0px; top:10px; right:10px; } .open { color: #27ae60; /*border: 2px solid #27ae60;*/ } .closed { color: rgba(231, 76, 60, 0.85); /*border: 2px solid rgba(231, 76, 60, 0.8);*/ } * { margin: 0; padding: 0; font-family: 'lato', sans-serif; } #timediv6, #timediv31{ font-size: 15px; text-transform: uppercase; text-align: center; position:static; width: 100%; background: transparent; margin: 0 auto; top: 10px; 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; vertical-align: top; font-weight: 600; background-color: rgb(0,0,0); /* fallback color */ background-color: rgba(0,0,0,0.5); /* black w/ opacity */ } .viewopen6, .viewopen31 { font-size: 15px; text-transform: uppercase; display:block; border: 2px solid rgba(70, 70, 70, 0.7); max-width: 100%; background: #fff; color: rgba(70, 70, 70, 0.8); margin: 0 auto; top:160px; padding: 10px; 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; cursor: pointer; border:blue solid 1px; position:static; } .viewopen6 i, .viewopen31 { color: rgba(70, 70, 70, 0.8); } @media , (max-width: 600px) { #timediv6, #timediv31{ margin-bottom: 20px; } } @media , (min-width: 601px) { #timediv6, #timediv31 { margin-right: 15px; } } .datetime { max-width: 320px; margin: 0 auto; } .day { display: inline-block; float: left; } .time { display: inline-block; float: right } .today { color: rgb(200, 85, 39); font-weight: 600; } @media , (max-height: 420px) { #timediv6, .viewopen6, #timediv31, .viewopen31 { top: 60%; } } /* view hours modal */ @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .modal-overlay6, .modal-overlay31{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(173, 173, 173, 0.5); display: none; z-index:999; } #modal-state6, #modal-state31 { display: none; } #modal-state6:checked + .modal-overlay6, #modal-state31:checked + .modal-overlay31 { opacity: 1; animation: fade-in .4s; display: block; } .modaltime6, .modaltime31{ position: absolute; margin: 0 auto; padding: 30px 25px; background: #fff; right: 0; left: 0; text-align: center; box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2); max-width: 400px; line-height: 1.8; border:red solid 1px; } .modaltime6 h2, .modaltime31 h2 { margin-top: 0; line-height: 25px; font-size: 22px; border-bottom: 1px solid #dce0d8; margin-bottom: 10px; padding-bottom: 10px; font-weight: 400; } @media , (max-width: 470px) { .modaltime6 { width: 75%; } .modaltime6 h2{ font-size: 20px; } .modaltime31 { width: 75%; } .modaltime31 h2{ font-size: 20px; } } #modal-state6:checked + .modal-overlay6 .modaltime6, #modal-state31:checked + .modal-overlay31 .modaltime31 { top: 20%; } .modal-overlay-close6, .modal-overlay-close31 { height: 100%; width: 100%; position: absolute; left: 0; top: 0; } .button-close6, .button-close31 { text-decoration: none; position: absolute; color: #fff; background: #464646; padding: 0px 7px; font-weight: bold; top: 0px; right: 0; cursor: pointer } /*time end*/<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <div class="timebox1" > <div id="timediv6"></div> <label class="viewopen6" for="modal-state6">view hours <i class="fa fa-clock-o"></i></label> <input type="checkbox" name="modal-state6" id="modal-state6"> <div class="modal-overlay6"> <label for="modal-state6" class="modal-overlay-close6"></label> <div class="modaltime6"> <label class="button-close6" for="modal-state6"><i class="fa fa-times"></i></label> <h2>we're open @ these times</h2> <div id="monday" class="datetime"> <div class="day">monday</div> <div class="time">11am - 11pm</div> </div> <br> <div id="tuesday" class="datetime"> <div class="day">tuesday</div> <div class="time">11am - 11pm</div> </div> <br> <div id="wednesday" class="datetime"> <div class="day">wednesday</div> <div class="time">11am - 11pm</div> </div> <br> <div id="thursday" class="datetime"> <div class="day">thursday</div> <div class="time">11am - 11pm</div> </div> <br> <div id="friday" class="datetime"> <div class="day">friday</div> <div class="time">9am - 12am</div> </div> <br> <div id="saturday" class="datetime"> <div class="day">saturday</div> <div class="time">9am - 12am</div> </div> <br> <div id="sunday" class="datetime"> <div class="day">sunday</div> <div class="time">9am - 11pm</div> </div> </div> </div> </div> <div class="timebox2" > <div id="timediv31"></div> <label class="viewopen31" for="modal-state31">view hours <i class="fa fa-clock-o"></i></label> <input type="checkbox" name="modal-state31" id="modal-state31"> <div class="modal-overlay31"> <label for="modal-state31" class="modal-overlay-close31"></label> <div class="modaltime31"> <label class="button-close31" for="modal-state31"><i class="fa fa-times"></i></label> <h2>we're open @ these times</h2> <div id="monday" class="datetime"> <div class="day">monday</div> <div class="time">9am - 12am</div> </div> <br> <div id="tuesday" class="datetime"> <div class="day">tuesday</div> <div class="time">9am - 12am</div> </div> <br> <div id="wednesday" class="datetime"> <div class="day">wednesday</div> <div class="time">9am - 12am</div> </div> <br> <div id="thursday" class="datetime"> <div class="day">thursday</div> <div class="time">9am - 12am</div> </div> <br> <div id="friday" class="datetime"> <div class="day">friday</div> <div class="time">9am - 12am</div> </div> <br> <div id="saturday" class="datetime"> <div class="day">saturday</div> <div class="time">9am - 1am</div> </div> <br> <div id="sunday" class="datetime"> <div class="day">sunday</div> <div class="time">9am - 1am</div> </div> </div> </div> </div>i cant modeltime31 viewopen day , time highlight model6. bleileve script
/*var currentday = weekday[now.getday()]; var currentdayid = "#" + currentday; //gets todays weekday , turns id $(currentdayid).toggleclass("today"); //hightlights today in view hours modal popup */
Comments
Post a Comment