javascript - ShowHide divs based on date - Stack Overflow

admin管理员组

文章数量:1201561

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

<script src=".8.2.min.js"></script>
<script>

window.setInterval(function(){

  var current = new Date();
  var expiry  = new Date("October 29, 2012 12:00:00")
  var expiry2 = new Date("October 30, 2012 12:00:00")

  if(current.getTime()>expiry.getTime()){
    $('#one').hide();
    $('#two').show();
  }

  else(current.getTime()>expiry2.getTime()){
       $('#two').hide();
       $('#three').show();
   }

}, 3000);

$('#one').show(); 
</script>

<div id="one" style="display:none">
<p>content for div #one</p>
</div>

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

<div id="three" style="display:none">
<p>content for div three</p>
</div>

Console in chrome is throwing up :

Unexpected token {

So it seems there's a syntax error with the if else statement, but it looks ok to me : (

Can any one spot what I'm missing?

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

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>

window.setInterval(function(){

  var current = new Date();
  var expiry  = new Date("October 29, 2012 12:00:00")
  var expiry2 = new Date("October 30, 2012 12:00:00")

  if(current.getTime()>expiry.getTime()){
    $('#one').hide();
    $('#two').show();
  }

  else(current.getTime()>expiry2.getTime()){
       $('#two').hide();
       $('#three').show();
   }

}, 3000);

$('#one').show(); 
</script>

<div id="one" style="display:none">
<p>content for div #one</p>
</div>

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

<div id="three" style="display:none">
<p>content for div three</p>
</div>

Console in chrome is throwing up :

Unexpected token {

So it seems there's a syntax error with the if else statement, but it looks ok to me : (

Can any one spot what I'm missing?

• javascript
• jquery
• date

Share Improve this question Follow edited Oct 29, 2012 at 12:21 Alexis Pigeon 7,5121111 gold badges4141 silver badges4545 bronze badges asked Oct 29, 2012 at 12:15 h0rhayh0rhay 13111 gold badge55 silver badges1515 bronze badges 4

• You can read more about if...else at MDN: developer.mozilla.org/en-US/docs/JavaScript/Reference/… – Andreas Louv Commented Oct 29, 2012 at 12:20
• You guys are faast! Thanks for spotting my dozy monday morning errors! – h0rhay Commented Oct 29, 2012 at 12:35
• Can anyone spot why the 3rd div don't appear? '<script> window.setInterval(function(){ var current = new Date(); var expiry = new Date("October 29, 2012 12:33:00"); var expiry2 = new Date("October 29, 2012 12:34:00"); if(current.getTime()>expiry.getTime()){ $('#one').hide(); $('#two').show(); } else if(current.getTime()>expiry2.getTime()){ $('#two').hide(); $('#three').show(); } }, 2000); </script>' – h0rhay Commented Oct 29, 2012 at 12:36
• @h0rhay I have updated my answer. The reason the third div is not showing is because the else if condition is never reached since the first if is true – Jacob George Commented Oct 29, 2012 at 13:01

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 7

You can check the working jsfiddle if you want

The issue is you require an else if at else (current.getTime() > expiry2.getTime()) {

UPDATE 1

Close each div with </div>. Fiddle is also updated

UPDATE 2

You also have what I think is a logical error. If you want the condition (current.getTime() > expiry2.getTime()) to be activated, it cant come as the else of the first condition (current.getTime()>expiry.getTime()). Change the else if to if, it should work then, although to further optimize the code, you could enclose the second if within the first if (considering that expiry is always less than expiry2 )

You forgot about if after else:

else if (current.getTime() > expiry2.getTime()) {

I've manipulated the script a bit so that you can add the class and the item will disappear on the time you decide. It will either show or hide if the content has expired. You can add more variables and else if statements, if need be.

I'm still learning JS and jQuery so please keep this in mind but everything seems to work the way I wanted it to and I have no errors in the Console.

https://jsfiddle.net/medel/qhgrtwzm/2/

HTML

<div class="houdini" style="display:none">
  <p>content for div #one</p>
</div>

JS with jQuery enabled 1.8.3

window.setInterval(function() {

  var current = new Date();
  var expiry = new Date("January 19, 2016 17:39:00")

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

  } else if (current.getTime() < expiry.getTime()) {
    $('.houdini').show();
  }

}, 0);

Jacob George's answer is excellent! Posting this up in case it helps anyone. I had to modify the date/time format for UTC/GMT compatibility with Internet Explorer. I also reordered the logic so it triggers like a waterfall, only showing one div based on the expiry time, or no div's if the current time is before the expiry value.

Javascript:

window.setInterval(function() {

  var current = new Date();
  var expiry = new Date('2015-12-03T02:00:00.000-08:00')
  var expiry2 = new Date('2015-12-04T02:00:00.000-08:00')
  var expiry3 = new Date('2015-12-05T02:00:00.000-08:00')

  if (current.getTime() > expiry3.getTime()) {
    $('#one').hide();
    $('#two').hide();
    $('#three').show();
  } else if (current.getTime() > expiry2.getTime()) {
    $('#one').hide();
    $('#two').show();
    $('#three').hide();
  } else if (current.getTime() > expiry.getTime()) {
    $('#one').show();
    $('#two').hide();
    $('#three').hide();
  }

}, 3000);

You forgot the if inside the else statement. Your if-else block should be something like below:

if (current.getTime() > expiry.getTime()) {
    $('#one').hide();
    $('#two').show();
} else if (current.getTime() > expiry2.getTime()) {
    $('#two').hide();
    $('#three').show();
}

本文标签： javascriptShowHide divs based on dateStack Overflow