Can I time content visibility in HTML based on time of day?

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>