我正在尝试制作一些会在某一分钟改变背景颜色的东西,我已经做到了。但是我想要五个在不同时间改变颜色的盒子。
例子; 框 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>
我的问题是只有一个盒子会改变颜色,而两个盒子应该同时具有不同的颜色。(一黄一绿)。
我不确定我是否在这里解释清楚,但我试图尽我所能。
谢谢。