2

だから私は最初のjavascriptクラス（total noob）を取っています。課題の1つは、赤を時間、緑の分、青を秒に割り当ててデジタル時計を変更し、変化したときにそれぞれの色成分を増やすことです。各要素 (時間、分、秒) に 10 進数の色の値 (例: "#850000") を割り当てることに成功しましたが、時間、分、秒が変化したとき (つまり赤) に明るさを上げる方法を見つけようとして脳が揚げられました。 1:00:00 pm から 2:00:00 pm に変化する "#870000" まで上がります.これをうまく行う方法については、どこでも検索しました.よろしくお願いします。

TJ

<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>
4

3 に答える 3

0

私が取り組んだ同様のプロジェクトでは、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);

完全な例はここで見ることができます。

あなたの場合、赤、青、緑のコンポーネントがの時間、分、秒のコンポーネントのみに依存するようにコードを変更しますDate();。

于 2012-11-29T05:03:00.787 に答える
0

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-29T05:01:51.567 に答える
0

時間の部分に色を割り当てる場所で、以下の変更を行います。

document.getElementById("hours").style.color = "rgb(" + (135 + (5 * currentHours)) + ",0,0)";
于 2012-11-29T05:26:34.827 に答える