使用switch語句在javascript中顯示圖片

我想在星期日使image1可見，星期一使用image2時可見，以此類推，使用Javascript中的switch語句。我該怎麼做呢？使用switch語句在javascript中顯示圖片

<!DOCTYPE html> 
<html> 
<body> 

<p>Click the button to display what day it is today.</p> 

<button onclick="myFunction()">Try it</button> 

<p id="demo"></p> 

<script> 
function myFunction() 
{ 
    var x; 
    var d=new Date().getDay(); 
    switch (d) 
    { 
     case 0: 
      x="Today it's Sunday"; 
        break; 
     case 1: 
      x="Today it's Monday"; 
        break; 
     case 2: 
      x="Today it's Tuesday"; 
        break; 
     case 3: 
      x="Today it's Wednesday"; 
        break; 
     case 4: 
      x="Today it's Thursday"; 
      break; 
    } 
    document.getElementById("demo").innerHTML=x; 
} 
</script> 

<img src="image1.png" id="one"style="visibility:Hidden"/> 
<img src="image2.png" id="one"style="visibility:Hidden"/> 
<img src="image3.png" id="one"style="visibility:Hidden"/> 
<img src="image4.png" id="one"style="visibility:Hidden"/> 
<img src="image5.png" id="one"style="visibility:Hidden"/> 
</body> 
</html>

來源

2013-01-21 Ashim Adhikari

你不應該對所有的圖像 – lostsource

使用同一ID'one'但如何使其從開關可見後，我改變所有的ID來有什麼不同？ –

使用'class'代替'id' – algorhythm

而不是有五個<img>元素，你可以有一個，然後簡單地根據日期值更改其src。

HTML標記

<img id='dayImage'/>

的Javascript

var d = new Date().getDay() 
var dayImg = document.getElementById('dayImage'); 
dayImg.src = "image"+d+".png";

更新

如果您還需要有五個獨立的圖像，你需要一種方法來識別每個圖像。由於它的立場，所有的圖像具有相同的id屬性，所以你首先需要解決這個問題。

假設您更改您的標記是這樣的：

<img src="image1.png" id="dayImg0" style="visibility:hidden"/> 
<img src="image2.png" id="dayImg1" style="visibility:hidden"/> 
<img src="image2.png" id="dayImg2" style="visibility:hidden"/> 
...

然後，您可以像這樣顯示

var d = new Date().getDay() 
var dayImg = document.getElementById('dayImg'+d); 
dayImg.style.visibility = "visible";

來源

2013-01-21 20:42:09 lostsource

五個圖像彼此不同並且處於不同的位置。 –

@AshimAdhikari回答已更新 – lostsource

第一合適的圖像，讓您的圖片像zero不同的ID，one ，...，four
使用display:none;而不是visibility:hidden，因爲顯示沒有不儲量它需要的空間

看到這個JSFIDDLE

來源

2013-01-21 20:48:46 algorhythm

我想稍微修改HTML頁面，這樣的：

<!DOCTYPE html> 
<html> 
<body> 

<p>Click the button to display what day it is today.</p> 

<button onclick="myFunction()">Try it</button> 

<p id="demo"></p> 

<script> 
function myFunction() 
{ 
    var x; 
    var d=new Date().getDay(); 
    switch (d) 
    { 
     case 0: 
      x="Today it's Sunday"; 
      document.getElementById("one").style.display="block"; 
      break; 
     case 1: 
      x="Today it's Monday"; 
      document.getElementById("two").style.display="block"; 
      break; 
     case 2: 
      x="Today it's Tuesday"; 
      document.getElementById("three").style.display="block"; 
      break; 
     case 3: 
      x="Today it's Wednesday"; 
      document.getElementById("four").style.display="block"; 
      break; 
     case 4: 
      x="Today it's Thursday"; 
      document.getElementById("five").style.display="block"; 
      break; 
    } 
    document.getElementById("demo").innerHTML=x; 
} 
</script> 

<img src="image1.png" id="one" style="display:none"/> 
<img src="image2.png" id="two" style="display:none"/> 
<img src="image3.png" id="three" style="display:none"/> 
<img src="image4.png" id="four" style="display:none"/> 
<img src="image5.png" id="five" style="display:none"/> 
</body> 
</html>

來源

2013-01-21 20:49:59

謝謝！這工作:) –

由於JavaScript的getDay（）函數返回0對於星期日（請參閱：http://www.w3schools.com/jsref/jsref_getday.asp），您不需要篡改索引，只需使用如下簡單循環：

<!DOCTYPE html>

<body> 
    <p>Click the button to display what day it is today.</p> 
    <button onclick="myFunction()">Try it</button> 
    <p id="demo"></p> 
    <script> 
     function myFunction() { 
      var x; 
      var d = new Date().getDay(); 
      switch (d) { 
       case 0: 
        x = "Today it's Sunday"; 
        break; 
       case 1: 
        x = "Today it's Monday"; 
        break; 
       case 2: 
        x = "Today it's Tuesday"; 
        break; 
       case 3: 
        x = "Today it's Wednesday"; 
        break; 
       case 4: 
        x = "Today it's Thursday"; 
        break; 
      } 
      document.getElementById("demo").innerHTML = x; 
      images = document.getElementsByTagName('img') 
      for (var i = 0; i < images.length; i++) { 
       if (i != d) { 
        images[i].style.visibility = 'Hidden'; 
       } else { 
        images[i].style.visibility = 'visible'; 
       } 
      } 
     } 
    </script> 
    <img src="image1.png" id="one" style="visibility:Hidden" /> 
    <img src="image2.png" id="one" style="visibility:Hidden" /> 
    <img src="image3.png" id="one" style="visibility:Hidden" /> 
    <img src="image4.png" id="one" style="visibility:Hidden" /> 
    <img src="image5.png" id="one" style="visibility:Hidden" /> 
</body>

來源

2013-01-21 21:02:17 bmaggi

使用switch語句在javascript中顯示圖片

回答

相關問題