爲數字時鐘每小時（r），分鐘（g），秒（b）增加RGB分量

因此，我正在學習第一個JavaScript類（總noob），其中一個任務是修改數字時鐘，顏色爲紅色至數小時，綠色分鐘，藍色至秒，然後在改變時增加相應顏色分量。我已經成功地爲每個元素（小時，分鐘，秒）分配了一個十進制顏色值（例如「＃850000」），但我的大腦正在試圖弄清楚如何在小時，分鐘和秒改變時提高亮度，即紅色上升到「＃870000」，從下午1:00點到下午2點00分，我到處搜索，沒有任何幫助，如何成功地做到這一點。這是我迄今爲止以及對此的任何幫助將不勝感激爲數字時鐘每小時（r），分鐘（g），秒（b）增加RGB分量

<script type="text/javascript"> 
<!-- 
    function updateClock() 
    { 

     var currentTime = new Date(); 
     var currentHours = currentTime.getHours(); 
     var currentMinutes = currentTime.getMinutes(); 
     var currentSeconds = currentTime.getSeconds(); 

     // Pad the minutes with leading zeros, if required 
     currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes; 

     // Pad the seconds with leading zeros, if required 
     currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds; 

     // Choose either "AM" or "PM" as appropriate 
     var timeOfDay = (currentHours < 12) ? "AM" : "PM"; 

     // Convert the hours component to 12-hour format 
     currentHours = (currentHours > 12) ? currentHours - 12 : currentHours; 

     // Convert an hours component if "0" to "12" 
     currentHours = (currentHours == 0) ? 12 : currentHours; 

     // Get hold of the html elements by their ids 
     var hoursElement = document.getElementById("hours"); 
     document.getElementById("hours").style.color = "#850000"; 
     var minutesElement = document.getElementById("minutes"); 
     document.getElementById("minutes").style.color = "#008500"; 
     var secondsElement = document.getElementById("seconds"); 
     document.getElementById("seconds").style.color = "#000085"; 
     var am_pmElement = document.getElementById("am_pm"); 

     // Put the clock sections text into the elements' innerHTML 
     hoursElement.innerHTML = currentHours; 
     minutesElement.innerHTML = currentMinutes; 
     secondsElement.innerHTML = currentSeconds; 
     am_pmElement.innerHTML = timeOfDay; 
    }    
// --> 
</script> 

</head> 
<body onload="updateClock(); setInterval('updateClock()', 1000)"> 
    <h1 align="center">The JavaScript digital clock</h1> 
    <h2 align="center">Thomas Fertterer - Lab 2</h2> 
    <div id='clock' style="text-align: center"> 
     <span id="hours"></span>: 
     <span id='minutes'></span>: 
     <span id='seconds'></span> 
     <span id='am_pm'></span> 
    </div> 
</body> 
</html>

來源

2012-11-29 TJ Fertterer

有些什麼相關：http://collegesnippets.blogspot.com/2011/09/time-color.html – Ivan

只需使用rgb顏色他們是比較容易的工作，因爲你可以用整數表示顏色通道的值：。

document.getElementById("hours").style.color = 'rgb(100, 200, 300)';

這裏有一個輔助函數給你。這需要在數字RGB值，並返回一個字符串：

function rgb(r, g, b) { 
    return 'rgb(' + r + ', ' + g + ', ' + b + ')'; 
}

例子：

> rgb(1, 2, 3) 
"rgb(1, 2, 3)"

另外，我建議不要使用字符串參數爲setInterval：

setInterval('updateClock()', 1000)

只需使用一個參考該功能代替：

setInterval(updateClock, 1000)

來源

2012-11-29 05:01:51 Blender

在我工作的類似項目中，我使用Math.sin函數使紅色，藍色和綠色成分基於當前時間波動。根據您想要的顏色究竟如何改變，你可以修改下面的示例代碼：

setInterval(function() { 
    var currentTime = new Date() 
var red = Math.floor((Math.sin(+currentTime/100000)+1) * 255/2); 
    var blue = Math.floor((Math.sin(2 * (+currentTime/100000 + 50))+1) * 255/2); 
    var green = Math.floor((Math.sin(3 * (+currentTime/100000 + 170))+1) * 255/2); 

    var color = "rgba(" + red + "," + green + "," + blue + ",255)"; 
    document.getElementById('clock').style.color = color; 
}, 100);

完整的例子可以看出here。

就你而言，我會修改代碼以使紅色，藍色和綠色組件完全依賴於Date();的小時，分鍾和秒組件。

來源

2012-11-29 05:03:00 Ivan

您在哪裏的顏色分配給時間的一部分以下變化：

document.getElementById("hours").style.color = "rgb(" + (135 + (5 * currentHours)) + ",0,0)";

來源

2012-11-29 05:26:34 Rups

非常感謝很多Rups，這工作完美。我只是改變了紅色，綠色和藍色，以反映當前的小時，currentMinutes和currentSeconds，一切都是黃金。即使重設爲基礎開始顏色，我會在每個時間間隔重新開始時將所有內容都設置爲。再次感謝。 –

爲數字時鐘每小時（r），分鐘（g），秒（b）增加RGB分量

回答

相關問題