javascript - Show and hide divs based on date - Stack Overflow

admin管理员组

文章数量:1305076

I'm trying to show hide divs based on date and am experimenting with the following code:

I would like to show the div between two dates, and I like to create multiple divs to show at different days of the year

window.setInterval(function() {

  var current = new Date();
  var start = new Date("February 03, 2025 09:00:00")
  var expiry = new Date("February 03, 2025 21:00:00")

  if (current.getTime() > start.getTime() > expiry.getTime()) {
    $('.divcontainerone').hide();

  } else if (current.getTime() > start.getTime() < expiry.getTime()) {
    $('.divcontainerone').show();
  }

}, 0);

window.setInterval(function() {

  var current = new Date();
  var start = new Date("February 13, 2025 09:00:00")
  var expiry = new Date("February 13, 2025 21:00:00")

  if (current.getTime() > start.getTime() > expiry.getTime()) {
    $('.divcontainertwo').hide();

  } else if (current.getTime() > start.getTime() < expiry.getTime()) {
    $('.divcontainertwo').show();
  }

}, 0);

<script src=".7.1/jquery.min.js"></script>
<div class="divcontainerone" style="display:none">
  <p>content for div #one</p>
</div>

<div class="divcontainertwo" style="display:none">
  <p>content for div #two</p>
</div>

I'm trying to show hide divs based on date and am experimenting with the following code:

I would like to show the div between two dates, and I like to create multiple divs to show at different days of the year

window.setInterval(function() {

  var current = new Date();
  var start = new Date("February 03, 2025 09:00:00")
  var expiry = new Date("February 03, 2025 21:00:00")

  if (current.getTime() > start.getTime() > expiry.getTime()) {
    $('.divcontainerone').hide();

  } else if (current.getTime() > start.getTime() < expiry.getTime()) {
    $('.divcontainerone').show();
  }

}, 0);

window.setInterval(function() {

  var current = new Date();
  var start = new Date("February 13, 2025 09:00:00")
  var expiry = new Date("February 13, 2025 21:00:00")

  if (current.getTime() > start.getTime() > expiry.getTime()) {
    $('.divcontainertwo').hide();

  } else if (current.getTime() > start.getTime() < expiry.getTime()) {
    $('.divcontainertwo').show();
  }

}, 0);

<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="divcontainerone" style="display:none">
  <p>content for div #one</p>
</div>

<div class="divcontainertwo" style="display:none">
  <p>content for div #two</p>
</div>

• javascript
• html
• jquery
• css
• date

Share Improve this question Follow edited Feb 3 at 22:14 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Feb 3 at 21:27 TimothyTimothy 7733 bronze badges 3

• Never use 0 as the interval ms value for setInterval - unless you purposefully want to cog the main thread. Use rather requestFrameRate with a sane delay. – Roko C. Buljan Commented Feb 3 at 22:22
• 3 Consider using new Date(year, month, day, hour, min, sec) instead of new Date(string) due to the vagaries of date parsing logic as outlined in Why does Date.parse give incorrect results?, or use ISO 8601 formatted dates for the string value. – Heretic Monkey Commented Feb 3 at 23:27
• current.getTime() > start.getTime() > expiry.getTime() likely isn't doing what you think it is. Also, getTime is redundant, the > operator will coerce the values to Number anyway (more or less calling getTime for you). What you probably want is current >= start && current < expiry. – RobG Commented Feb 10 at 8:59

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

Unless you expect your users to visit your web page for days on end without refreshing, you could get rid of your setIntervals and just decide which div to show immediately when the page is loaded the first time. See below for an example (assuming my assumption is correct that you're using jQuery).

$(function() {
  var current = new Date();
  $('.divcontainerone').toggle(current > new Date("February 03, 2025 09:00:00") && current < new Date("February 03, 2025 21:00:00")); 
  $('.divcontainertwo').toggle(current > new Date("February 13, 2025 09:00:00") && current < new Date("February 13, 2025 21:00:00"));
});

My example could use some clean-up, because you would still have some duplicated code, but I think it might at least be helpful with helping you understand how to tackle it.

本文标签： javascriptShow and hide divs based on dateStack Overflow