假设页面上有 4 个按钮,分别标记为按钮 A、按钮 B、按钮 C 和按钮 D。 通过单击每个按钮,用户将重定向到另一个页面。但是,我希望每个按钮在预定义的日期和时间处于事件状态,并且该按钮在激活时的悬停颜色为绿色。即刻,按钮 A 在 2019 年 6 月 23 日下午 2:00 至下午 4: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: * { 框大小:边框框; } body { 颜色:#222;填充:1em 2em;背景:#eee; font:13px/1.4 'open sans', sans-serif; } h1, h2 { margin :0 0 .5em;行高:1.2; font-family:'open sans condensed', sans-serif; } h1 { 颜色:#f90;文本转换:大写; } p { margin :1em 0; } 一个{颜色:#06c; -webkit-transition:.2s 线性;过渡:.2s线性; } a:hover { 颜色:#07c; } 页脚{颜色:#888;清除:两者;字体大小:12px; margin :2em 0 0;文本对齐:居中; } 页脚 a { 颜色:#444; } #wrap { margin :1em 自动;填充: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/jquery@3.4.1/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>
最佳答案
让按钮默认关闭,
let timeToActivate = (new Date("June 23, 2019 14:00:00")).getTime();
let timeToDeActivate = (new Date("June 23, 2019 16:00:00")).getTime();
let currTime = Date.now();
if(currTime > timeToActivate && currTime < timeToDeActivate){
// Write Code To Activate Button
}else if(currTime < timeToActivate){
// To Activate on 2pm
setTimeout(() => {
// write code to activate button
// To Deactivate button on 4pm
setTimeout(() => {
// write code to deactivate button
}, timeToDeActivate - Date.now())
}, timeToActivate - currTime);
}
根据你更新的问题,我创建了一个 fiddle ,检查它是否正常工作
关于javascript - 如何使用 javascript 安排启用/禁用 html 中的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56723155/