0

我想让 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>
4

4 回答 4

2

您可以拥有一个元素，而不是拥有五个<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-21T20:42:09.917 回答
0
  • 首先，为您的图像提供不同的 id，例如zero, one, ...,four
  • 使用display:none;代替visibility:hidden，因为 display-none 不保留它所需的空间

看到这个JSFIDDLE

于 2013-01-21T20:48:46.557 回答
0

我会稍微修改 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-21T20:49:59.213 回答
0

由于 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>

于 2013-01-21T21:02:17.213 回答