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

要素を 5 つ持つ代わりに、<img>要素を 1 つ持つことができ、日の値に応じて src を変更するだけです。

HTML マークアップ

<img id='dayImage'/>

Javascript

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

アップデート

それでも 5 つの個別の画像が必要な場合は、各画像を識別する方法が必要になります。現状では、すべての画像が同じ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

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
  • zeroまず、画像に , one, ...,のような異なる ID を付けます。four
  • display-none は必要なスペースを予約しないため、display:none;の代わりに使用しますvisibility:hidden

このJSFIDDLEを参照してください

于 2013-01-21T20:48:46.557 に答える
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 に答える