所以我试图通过构建一个谷歌插件来自学 JavaScript。这个想法是每个间隔颜色都会变化(秒针每 5 秒一次，分钟每 5 分钟一次等)，但我遇到了麻烦。我已经构建了时钟，除了一些风格上的变化之外，我认为它已经完成了，只是留下了这个讨厌的 javascript。所以我的第一个想法是计算时钟的 Angular 并为每种颜色创建我猜的“区域”(当秒针在 12-1 或 30 度之间时它是红色的，然后 30 度之后它变成绿色然后蓝色等.).所以这就是我所有的 html 和 css + 使时钟工作和 Angular 计算的 javascript。
<!DOCTYPE html>
<html>
<head>
<title>Analog Clock</title>
<link type="text/css" rel="stylesheet" href="clock1.css">
</head>
<body>
<div class="analog-clock">
<svg width="140" height="140">
<circle id="clock-face" cx="70" cy="70" r="65" />
<line id="h-hand" x1="70" y1="70" x2="70" y2="38" />
<line id="m-hand" x1="70" y1="70" x2="70" y2="20" />
<line id="s-hand" x1="70" y1="70" x2="70" y2="12" />
<text x="62" y="18">12</text>
<text x="126" y="76">3</text>
<text x="66" y="130">6</text>
<text x="7" y="76">9</text>
</svg>
<div class="time-text">
<span id="hr">:</span>
<span></span>
<span id="min">:</span>
<span></span>
<span id="sec">:</span>
<span id="suffix"></span>
</div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
font-family:sans-serif;
font-size:14px;
}
.analog-clock{
width:140px;
height:140px;
}
#clock-face{
stroke:black;
stroke-width:2px;
fill:transparent;
}
#h-hand, #m-hand, #s-hand {
stroke:black;
stroke-linecap:round;
}
#h-hand{
stroke-width:3px;
}
#m-hand{
stroke-width:2px;
}
#s-hand{
stroke-width:1px;
}
.time-text{
text-align:center;
}
function clock(){
//calculate angle
var d, h, m, s;
d = new Date;
h = 30 * ((d.getHours() % 12) + d.getMinutes() / 60);
m = 6 * d.getMinutes();
s = 6 * d.getSeconds();
//move hands
setAttr('h-hand', h);
setAttr('m-hand', m);
setAttr('s-hand', s);
setAttr('s-tail', s+180);
//display time
h = d.getHours();
m = d.getMinutes();
s = d.getSeconds();
// necessary? if(h >= 12){
// setText('suffix', 'PM');
// }else{
// setText('suffix', 'AM');
// }
if(h != 12){
h %= 12;
}
//setText('sec', s);
// setText('min', m);
// setText('hr', h);
//call every second
setTimeout(clock, 1000);
};
function setAttr(id,val){
var v = 'rotate(' + val + ', 70, 70)';
document.getElementById(id).setAttribute('transform', v);
};
function setText(id,val){
if(val < 10){
val = '0' + val;
}
document.getElementById(id).innerHTML = val;
};
const colors = ['black', 'blue', 'red', 'green', 'pink', 'orange', 'yellow', 'purple', 'black', 'silver', 'gold', 'brown', 'gray', 'blue', 'red', 'pink', 'magenta', 'orange', 'black'];
function getColorTerse() {
const now = new Date();
const minutes = now.getMinutes();
const interval = Math.floor(minutes/5);
return colors[interval];
}
const color = getColorTerse();
const attribute = 'stroke: ' + color;
document.getElementById('m-hand').setAttribute('style', attribute);
//var hand = document.getElementById("h-hand")?
//var handm = document.getElementById("m-hand")?
//var hands = document.getElementById("s-hand")?
然后这是我到目前为止计算 Angular 方法。
function testColor(){
var ang;
var num;
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
}
所以我被困在这里有一段时间了，我的想法已经用完了(我尝试了整个 setInterval 的事情，但那也是一团糟)所以我想我只是想知道是否可以将颜色值分配给一个时钟上的 Angular ，然后分针/时针/秒针在该 Angular 时将变为该颜色。有没有办法像 if/else 语句或 while 循环那样组合？基本上最重要的事情是我什至可以为这些 Angular 分配颜色值还是我应该采用不同的策略？
编辑:所以我添加了建议的代码。我决定在时针、秒针和分针上测试它，得到了相同的结果。加载时钟时会分配颜色，但除非您刷新页面，否则它不会改变颜色
最佳答案
与您根据当前时间绘制手的方式相同，您也应该根据该时间确定颜色。这是编程中的一个重要概念，您希望逻辑基于模型而不是 UI 元素。
这里有一些 javascript 可以帮助您入门。
function getColor() {
const now = new Date();
const minutes = now.getMinutes();
switch (Math.floor(minutes/5)) {
case 0:
return 'black';
break;
case 1:
return 'blue';
break;
//etc
default:
return 'red';
break;
}
}
这是一个如何使用 switch 的好例子，但是你会发现如果你有 20 个不同的间隔，它会变得很长。下面的代码完成了同样的事情，但是使用了一个数组。
const colors = ['black', 'blue', 'red', 'green', 'etc', 'but', 'make', 'sure', 'you', 'have', '20', 'elements', 'in', 'there', 'or', 'it', 'will', 'return', 'undefined!'];
function getColorTerse() {
const now = new Date();
const minutes = now.getMinutes();
const interval = Math.floor(minutes/5);
return colors[interval];
}
然后你可以像这样使用这个函数:
const color = getColorTerse();
const attribute = 'stroke: ' + color;
document.getElementById('h-hand').setAttribute('style', attribute);
关于javascript - 使用 JavaScript 构建变色模拟时钟的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47230447/