Question

所以我试图通过构建谷歌插件来自学JavaScript。这个想法是每个颜色变化的间隔（每5秒一秒钟，每5分钟一分钟等），但我遇到了麻烦。我已经建立了时钟，除了一些风格上的变化，我认为它只是留下了这个讨厌的JavaScript。所以我的第一个想法是计算时钟的角度并创建＆＃34;区域＆＃34;我想对于每种颜色（当秒针在12-1或30度之间时它是红色，然后30度后它变为绿色然后变成蓝色等）。所以这就是我的html和css +使时钟工作和角度计算的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")?

然后这是我到目前为止计算角度的方法。

function testColor(){
   var ang;
   var num;
   for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
}

所以我已经被困在这里一段时间了，我已经没有想法了（我尝试了整套setInterval但是那也是一团糟）所以我想我只是想知道它是不是＆＆＃39;可以将颜色值分配给时钟上的某个角度，然后当它处于该角度时，分钟/小时/秒针将变为该颜色。有没有办法组成if / else语句或while循环？胸围基本上最重要的是我是否可以为这些角度分配颜色值，还是应该采用不同的策略？

编辑：所以我添加了建议的代码。我决定用时针，秒针和分针测试它并得到相同的结果。加载时钟时会分配颜色，但除非您刷新页面，否则它不会改变颜色

Answer 1

与基于当前时间抽出手的方式相同，您应该根据该时间确定颜色。这是编程中的一个重要概念，您希望将逻辑基于模型，而不是基于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;
  }
}

这是如何使用开关的一个很好的例子，但是如果你有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构建变色模拟时钟的问题

1 个答案: