Question

我正在尝试使用if和else语句根据季节显示图片对于var currentMonth = new Date().getMonth();，它返回当前月份为0-11 0为Jan，11为12月。现在我很确定我的问题在于我如何执行else if语句。当我更改桌面日期时，无论我使用的是哪个月，它都只显示冬季或春季的图像。它会显示冬季图片，但春季图片将在所有其他月份显示。这对我说，这是else if语句的问题。任何帮助将不胜感激

<script language="javascript">

  function retrievePictures(){
    var currentMonth = new Date().getMonth();


    if(currentMonth >= 10 || currentMonth <=1){
      //winter
      var html = '<img src="img/hall-of-gods.jpg" width="600" height="400" alt="Hall Of The Gods" />';

    }

    else if(currentMonth >= 2 || currentMonth <=4){
      //spring
      var html = '<img src="img/merlyn.jpg" width="600" height="400" alt="Spring Time Cat" />';

    }

    else if(currentMonth >= 5 || currentMonth <=7){
      //summer    
      var html = '<img src="img/bounty.jpg" alt="Summer Bounty" width="600" height="400" />';

    }

    else{
      //autum    
      var html = '<img src="img/louis.jpg" alt="King Louis" width="600" height="400" />';

    }
    document.write(html);
  }
</script>



<div class="slideshow">
  <script type="text/javascript">
    retrievePictures();
  </script>
</div>

Answer 1

尝试使用switch case代替大量if else。语法更清晰易懂。另外，不是在变量html上声明4次，而是在switch语句之前只声明一次。

var currentMonth = new Date().getMonth();
var html ='';
switch (currentMonth) {
    case 10:
    case 11:
    case 0:
        //winter
      html = '<img src="img/hall-of-gods.jpg" width="600" height="400" alt="Hall Of The Gods" />';
   break;

    case 2:
    case 3:
    case 4:
    //spring
        html = '<img src="img/merlyn.jpg" width="600" height="400" alt="Spring Time Cat" />';
        break;
    case 5:
    case 6:
    case 7:
//summer 
        html = '<img src="img/bounty.jpg" alt="Summer Bounty" width="600" height="400" />';
        break;
    case 8:
    case 9:
      //autum 
         html = '<img src="img/louis.jpg" alt="King Louis" width="600" height="400" />';
        break;
}

Answer 2

更改为以下代码应解决您的问题。我将||设为&&，将<=替换为< num+1

function retrievePictures(){
    var currentMonth = new Date().getMonth();


    if(currentMonth > 9 || currentMonth <2){
    //winter
        var html = '<img src="img/hall-of-gods.jpg" width="600" height="400" alt="Hall Of The Gods" />';

    }

  else if(currentMonth > 1 && currentMonth < 5){
    //spring
        var html = '<img src="img/merlyn.jpg" width="600" height="400" alt="Spring Time Cat" />';

    }

    else if(currentMonth > 4 && currentMonth < 8){
    //summer    
        var html = '<img src="img/bounty.jpg" alt="Summer Bounty" width="600" height="400" />';

    }

 else{
    //autum    
        var html = '<img src="img/louis.jpg" alt="King Louis" width="600" height="400" />';

    }
        document.write(html);
    }
    </script>



    <div class="slideshow">
        <script type="text/javascript">
            retrievePictures();
        </script>

Answer 3

问题似乎是，如果您在有下列数字时检查是否需要AND运算符。

在你的if语句中，你检查currentMonth >= 2自2，..，11大于2你的if语句停止，并且在此之后不检查其余的语句。它只显示了冬天，因为它高于这个if语句。

function retrievePictures(){
    var currentMonth = new Date().getMonth();

    if(currentMonth >= 10 || currentMonth <= 1){
        //winter 10,11 || 0,1
        var html = '<img src="img/hall-of-gods.jpg" width="600" height="400" alt="Hall Of The Gods" />';
    }
    else if(currentMonth >= 2 && currentMonth <= 4){
        //spring 2,3,4
        var html = '<img src="img/merlyn.jpg" width="600" height="400" alt="Spring Time Cat" />';
    }
    else if(currentMonth >= 5 && currentMonth <= 7){
        //summer 5,6,7
        var html = '<img src="img/bounty.jpg" alt="Summer Bounty" width="600" height="400" />';
    }
    else{
        //autum 8,9
        var html = '<img src="img/louis.jpg" alt="King Louis" width="600" height="400" />';
    }
    document.write(html);
}

Answer 4

与其他人提到的一样，错误来自于在if语句中使用OR（||）而不是AND（&&）。如果可以的话，我建议不要使用任何if，而是使用数据创建一个数组并从中检索img的src和alt：

function retrievePictures() {
	let t = [
	{months: [0,1,10,11], img: {src: 'hall-of-gods.jpg', alt:'Hall Of The Gods'}},
  	{months: [2,3,4], img: {src: 'merlyn.jpg', alt:'Spring Time Cat'}},
  	{months: [5,6,7], img: {src: 'bounty.jpg', alt:'Summer Bounty'}},
  	{months: [8,9], img: {src: 'louis.jpg', alt:'King Louis'}}
	];
  let currentMonth = new Date().getMonth();
  let obj = t.find(e => e.months.includes(currentMonth));
  return `<img src='${obj.img.src}' alt='${obj.img.alt}' width="600" height="400" />`;
}

document.write(retrievePictures())

否则如果语句没有在第一次迭代之后触发

4 个答案: