建立一個顏色變化的模擬時鐘w/javascript的問題

所以我試圖通過構建一個谷歌插件教自己的JavaScript。這個想法是，每個間隔的顏色變化（每5秒秒手，每5分鐘分鐘等），但我有麻煩。我已經構建了時鐘，除了一些文體變化之外，我認爲這只是離開這個討厭的JavaScript。所以我的第一個想法是計算時鐘的角度，併爲每種顏色創建「區域」（當秒針在12-1或30度之間時爲紅色，然後在30度後變爲綠色，然後變爲藍色等等）。所以這是我的所有html和css + javascript使時鐘工作和角度計算。建立一個顏色變化的模擬時鐘w/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的事情，但這是一個爛攤子太），所以我想我只是想知道，如果它可以分配顏色值轉換爲時鐘上的角度，然後在該角度下分鐘/小時/秒針將變爲該顏色。有沒有辦法像if/else語句或while循環一樣編寫？胸圍基本上最大的問題是，我甚至可以將顏色值分配給這些角度，還是應該採取不同的策略？

編輯：所以我在建議的代碼中添加。我決定在小時，秒和分鐘測試它，並得到相同的結果。加載時鐘時分配顏色，但除非刷新頁面，否則顏色不會改變顏色

來源

2017-11-10 amnmustafa15

那豈不是更容易計算基於當前時間的顏色，而不是在手的位置？ –

@GuillaumeCR可能，我還沒有探索過這個選項。是否有可能使用JS來構建它？就像我上面說過的，我使用這個來學習javascript – amnmustafa15

與基於當前時間繪製手的方式相同，您應該根據該時間確定顏色爲好。在編程中，這是一個重要的概念，您希望將邏輯基於模型，而不是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);

來源

2017-11-10 20:25:22

，所以我插入了它，但我無法讓手改變顏色。我嘗試使用var hand/var hands/var handm我在原始帖子中註釋掉了。然後我嘗試在getColorTerse中插入手/ s/m，但沒有運氣。 – amnmustafa15

@ amnmustafa15所以聲明一個函數並執行它是有區別的。你確定你的代碼正在執行嗎？使用chrome的開發工具和調試器斷點來確保。發佈你的代碼的更新版本，並告訴我們你遇到什麼問題。 –

@ amnmustafa15編輯我的答案，顯示如何使用該功能。 –

建立一個顏色變化的模擬時鐘w/javascript的問題

回答

相關問題