Question

我希望image1在星期日可见，image2在星期一时可见，依此类推，使用Javascript中的switch语句。我该怎么做？

<!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>

Answer 1

您可以根据日期值更改其src，而不是拥有五个<img>元素。

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";

Answer 2

首先，为您的图片提供不同的ID，例如zero，one，...，four
使用display:none;代替visibility:hidden，因为display-none不会保留所需的空间

请参阅此JSFIDDLE

Answer 3

我会略微修改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>

Answer 4

由于JavaScript getDay（）函数在星期日返回0（参见：http://www.w3schools.com/jsref/jsref_getday.asp）你不需要乱用索引，只需使用这样的简单for循环：

<!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>

使用switch语句在javascript中显示图片

4 个答案: