Рассмотрим 4 кнопки на странице, обозначенные как кнопка A, кнопка B, кнопка C и кнопка D. Нажимая каждую кнопку, пользователь перенаправляется на другую страницу. Однако я хочу, чтобы каждая кнопка была активна в заранее определенные дату и время, а цвет наведения этой кнопки был зеленым, когда она активирована. На мгновение кнопка A активируется 23 июня 2019 года с 14:00 до 16:00. Его цвет зеленый, а цвет остальных кнопок красный, и они неактивны. В следующий заранее заданный момент кнопка B станет зеленой, будет активирована и так далее. Возможно ли использование Javascript?
Обновление: пожалуйста, помогите мне узнать, как приведенный ниже код работает с этой топологией:
HTML:
<div id="wrap">
<header>
<h1>How this code works?</h1>
<div id="nav">
<ul>
<li><a class="active" href="#home">ITEM1</a></li>
<li><a href="#about">ITEM2</a></li>
<li><a href="#contact">ITEM3</a></li>
</ul>
</div>
</header>
<section>
</section>
<footer></footer>
</div>
CSS: * {box-sizing: border-box; } body {цвет: # 222; отступ: 1em 2em; фон: #eee; шрифт: 13px / 1.4 'open sans', sans-serif; } h1, h2 {маржа: 0 0 .5em; высота строки: 1,2; семейство шрифтов: 'open sans condensed', sans-serif; } h1 {цвет: # f90; преобразование текста: прописные буквы; } p {маржа: 1em 0; } a {цвет: # 06c; -webkit-transition: .2s linear; переход: .2с линейный; } a: hover {color: # 07c; } нижний колонтитул {цвет: # 888; ясно: оба; размер шрифта: 12 пикселей; маржа: 2em 0 0; выравнивание текста: центр; } нижний колонтитул {color: # 444; } #wrap {margin: 1em auto; заполнение: 1.5em; фон: #fff; тень коробки: 0 5px 5px 0 rgba (0,0,0, .2); }
#nav { background:#333; }
#nav ul { padding:0; overflow:hidden; list-style:none; }
#nav li { float:left; }
#nav a { color:#fff; display:block; padding:.5em 2em; }
#nav a:hover { background:#666; }
#nav a.active { color:#222; background:#f90; }
#nav a.active:hover {}
#nav.over a.active { color:#fff; background:none; }
#nav.over a.active:hover { background:#666; }
JavaScript:
let timeToActivate = (new Date("June 23, 2019 14:00:00")).getTime();
let timeToDeActivate = (new Date("June 24, 2019 16:00:00")).getTime();
let currTime = Date.now();
var NewClass = document.querySelector("#nav a");
if(currTime > timeToActivate && currTime < timeToDeActivate){
// Write Code To Activate Button
NewClass.setAttribute("class","active");
}else if(currTime < timeToActivate){
NewClass.setAttribute("class","active");
setTimeout(() => {
// write code to activate button
// To Deactivate button on 4pm
setTimeout(() => {
// write code to deactivate button
}, timeToDeActivate - Date.now())
}, timeToActivate - currDate);
}
ОБНОВЛЕНИЕ 2: Решение с использованием jquery Вот рабочее решение. Я только что обновил пост на случай, если у кого-то есть та же цель:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script>
btna = [
{
"id":"#btn123",
"formId" : "#wpcf7-f4849-p4850-o1",
'openTime' : "June 23, 2019 14:00:00",
'closeTime' : "June 23, 2019 14:00:00",
},
{
"id":"#btn1234",
"formId" : "#wpcf7-f4940-p4850-o2",
'openTime' : "June 23, 2019 14:00:00",
'closeTime' : "June 25, 2019 14:00:00",
},
{
"id":"#btn12345",
"formId" : "#wpcf7-f4941-p4850-o3",
'openTime' : "June 23, 2019 14:00:00",
'closeTime' : "June 28, 2019 14:00:00",
}
]
$(document).ready(function(){
let openTime
let closeTime
let button
let itemForm
let now = Date.now();
btna.map(function(item){
openTime = (new Date(item.openTime)).getTime()
closeTime = (new Date(item.closeTime)).getTime()
button = $( item.id )
itemForm = $( item.formId )
if (closeTime > now && openTime < now ) {
// Button in correct time period
button.addClass("active")
// if you don't want to auto hide form in page startup just comment out this line
itemForm.hide()
button.click(function(){
$( item.formId ).toggle(250)
})
}else{
// Button is'nt in its time period
button.addClass("ex1")
itemForm.hide()
}
})
})</script>
