디지털 시계의 시간 (r), 분 (g), 초 (b)마다 RGB 구성 요소를 늘립니다.

첫 번째 자바 스크립트 클래스 (총 멍청한 놈)를 가져 가고 있으며 할당 중 하나는 빨간색에서시, 초록색, 초에서 파란색으로 변경 한 다음 변경되면 각 색상 구성 요소가 증가합니다. 나는 십진수 값 (예 : "# 850000")을 각 요소 (시, 분, 초)에 성공적으로 할당했지만, 뇌가 튀어서 시간, 분, 초가 바뀔 때 밝기를 증가시키는 방법을 알아 내려고 시도합니다 "# 870000"이 오후 1:00:00에서 2:00: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 기능을 사용하여 빨강, 파랑 및 녹색 구성 요소의 현재 시간을 기준으로 변동합니다. 전체 예제는 here를 볼 수 있습니다

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);

: 변경할 색상에 원하는 방법을 정확하게에 따라 다음 예제 코드를 수정할 수 있습니다.

귀하의 경우 빨강, 파랑 및 녹색 구성 요소가 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, 이것은 완벽하게 작동했습니다. 나는 현재 Hours, currentMinutes 및 currentSeconds를 반영하도록 빨강, 녹색 및 파랑을 변경했으며 모든 것이 황금색입니다. 기본 시작 색상으로 재설정도 각 시간 간격이 시작될 때까지 모든 것을 설정합니다. 다시 한번 감사드립니다. –

디지털 시계의 시간 (r), 분 (g), 초 (b)마다 RGB 구성 요소를 늘립니다.

답변

관련 문제