一个盒子一次改变颜色而不是两个?

时间:2013-11-03 15:55:39

标签: javascript html css clock

我正在尝试制作能在某一分钟改变背景颜色的东西,我已经这样做了。但是我希望有五个盒子可以在不同的时间改变颜色。

实施例; 框1在任何以0结尾的分钟变为黄色 方框1在以1结尾的任何分钟变为绿色 方框1默认为蓝色

方框2在以1结尾的任何一分钟变为黄色 框2在任何以2结尾的分钟变为绿色 方框2默认为蓝色颜色

等完整的5个盒子,这是我第一个代码;

<script>
function clock()
{
setInterval(
function(){
    var d = new Date();
    var h = d.getHours();
    var m = d.getMinutes();
    var s = d.getSeconds();
    var box = document.getElementById("box");

    switch(m % 10)
    {
        case 4:
            box.style.background = "ffc000";
            break;
        case 5:
            box.style.background = "34db00";
            break;
        case 9:
            box.style.background = "ffc000";
            break;
        case 0:
            box.style.background = "34db00";
            break;
        default:
            box.style.background = "0093ff";
    }
}, 1000);   
}
</script>

<center>


<body onload="clock()">
<div id="box" style="width:30%; height:150px; background: 0093ff; float: left; border-radius:25px;">


<p>
<p style="color:white">

<body vlink="white">
<body link="white">


<table border="0">
<tr>
<td><a href="Shop Url" target="iframe1">Shop Name</a></td>
<td><a href="Shop Url" target="iframe1">Shop Name</a></td>
<td><a href="Shop Url" target="iframe1">Shop Name</a></td>
</tr>
<tr>
<td><a href="Shop Url" target="iframe1">Shop Name</a></td>
<td><a href="Shop Url" target="iframe1">Shop Name</a></td>
<td><a href="Shop Url" target="iframe1">Shop Name</a></td>
</tr>
<tr>
<td><a href="Shop Url" target="iframe1">Shop Name</a></td>
<td><a href="Shop Url" target="iframe1">Shop Name</a></td>
<td><a href="Shop Url" target="iframe1">Shop Name</a></td>
</tr>
<tr>
<td><a href="Shop Url" target="iframe1">Shop Name</a></td>
<td><a href="Shop Url" target="iframe1">Shop Name</a></td>
<td><a href="Shop Url" target="iframe1">Shop Name</a></td>
</tr>
<tr>
<td><a href="Shop Url" target="iframe1">Shop Name</a></td>
<td><a href="Shop Url" target="iframe1">Shop Name</a></td>
<td><a href="Shop Url" target="iframe1">Shop Name</a></td>
</tr>
</table>

</p>



</div>
</body>

我的问题是只有一个盒子会改变颜色,而两个盒子应该同时具有不同的颜色。 (一黄色和一个绿色)。

我不确定我是否在这里清楚地解释过,但我试图尽我所能。

感谢。

1 个答案:

答案 0 :(得分:-1)

请勿使用开关组。切换块的目的是从各种可能性中选择一种替代方案,但是您说您可能需要多个标准来匹配。只需用一系列if语句替换你的switch块(这样就可以应用多个)