我可以根据一天中的时间来计时HTML中的内容可见性吗



我有一个本地网站,我想在那里显示一天中特定时间的特定部分(div(。这可能吗?如果是,我该如何实现?谢谢

我有一个简单的示例页面:

<!DOCTYPE html>
<html lang="en">
<head>
<title>timed content</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
<h2>timed content</h2>
<div id="eight" class="well">only show 8AM</div>

<div id="eleven" class="well">only show at 11AM</div>

<div id="three" class="well">only show at 3PM</div>
</div>
</body>
</html>

使用JS可以实现这一点,方法是使用Date对象,并提供每个元素的一些数据,说明您希望在什么时间显示它。

let now = new Date(); // Get the current time
let elem = document.querySelector(`div[data-hour="${now.getHours()}"]`); // Select the element that's supposed to be shown for the current time
if (elem) { // If its exists, show it
elem.style.display = 'block';
}
div[data-hour] {
/* By default hide all elements that are "timed" */
display: none;
}
<div class="container">
<h2>timed content</h2>
<div data-hour="0">0:00</div>
<div data-hour="1">1:00</div>
<div data-hour="2">2:00</div>
<div data-hour="3">3:00</div>
<div data-hour="4">4:00</div>
<div data-hour="5">5:00</div>
<div data-hour="6">6:00</div>
<div data-hour="7">7:00</div>
<div data-hour="8">8:00</div>
<div data-hour="9">9:00</div>
<div data-hour="10">10:00</div>
<div data-hour="11">11:00</div>
<div data-hour="12">12:00</div>
<div data-hour="13">13:00</div>
<div data-hour="14">14:00</div>
<div data-hour="15">15:00</div>
<div data-hour="16">16:00</div>
<div data-hour="17">17:00</div>
<div data-hour="18">18:00</div>
<div data-hour="19">19:00</div>
<div data-hour="20">20:00</div>
<div data-hour="21">21:00</div>
<div data-hour="22">22:00</div>
<div data-hour="23">23:00</div>
</div>

如果你想检查的时间超过当前小时,你需要提供每个元素的更多数据并进行检查。如果你想在某个时间显示多个元素,请使用document.querySelectorAll并迭代结果。

最新更新