1

私は次のようなスクリプトを書きたいと思っています。

  1. 1秒ごとに常に背景色を変更します。
  2. Webページに最初にアクセスしたとき、開始色は時刻に基づいて設定されます。したがって、毎日午前7時（またはその時間に近い時間）にWebサイトにアクセスすると、ブラウザーを10時間開いていても、常に赤のシェアになります。

IFステートメントをロードせずにこれを行うにはどうすればよいですか？

ここを見てください：https ： //stackoverflow.com/a/1455177/560287それは16776960の異なる色があると言います、私はそれほど多くは必要ありませんが、これをどのように減らすことができsetIntervalますか？

4

3 に答える 3

2

1時間ごとに1つずつ、1時間ごとのカラー配列を作成します。

var hourly = "#ff00cc,red,green,blue...".split(",")

次に、現在の時間に一致する要素に背景を設定します。

var d = new Date();
var h = d.getHours();
$('body').css('background-color',hourly[h])

このスクリプトをページの上部に配置すると、リロード時に色が設定されます。

これは「絶えず」変化するわけではありませんが、出発点になります。

于 2013-01-24T16:26:17.367 に答える
2

これは機能します：

まず、それを実行する関数を作成しましょう。

    "use strict";
            function changeColor() {
    //rgb
    console.log('event fired');
    var colors = [0, 0, 0];
    var hour = new Date().getHours();
    console.log(hour);

    //Will get an valid rgb color
    var color = parseInt(255/24*hour);
    console.log(color);
    for(var i = 0; i < colors.length; i++) {
        colors[i] = color;
    }
    //add the color to the element you want:
    document.body.style.backgroundColor = "rgb("+colors[0] + "," + colors[1] + "," + colors[2] + ")";
    console.log("event fired. color get:" + colors[0] + colors[1] + colors[2]);
  }

その後、30分ごとに発火するイベントを作りましょう（30分ごとに色が変わります）：

setInterval(changeColor,1800000);
于 2013-01-24T16:40:51.337 に答える
2

2つの色のrgb/差を計算し、現在の昼間で増減することができます。最初に、色の解析部分を実行するものが必要です。

var parseColor = function (start, end, now) {
    return [
        start[0] + now * (end[0] - start[0]) | 0,
        start[1] + now * (end[1] - start[1]) | 0,
        start[2] + now * (end[2] - start[2]) | 0,
        (start[3] && end[3]) ? (start[3] + now * (end[3] - start[3]) | 0) : 1
    ];
};

それでは、日付の計算と色の解析の周りに非常に単純なラッパーを定義しましょう。

var daytimeColor = function (start, end, date) {
    date = date || new Date();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var now = hour * minute / 1440;
    var rgba = parseColor(start, end, now);

    return 'rgba(' + rgba.join() + ')';
};

最後になりましたが、それを呼び出して、カラー配列を次の場所に渡します。

 var start = [255, 0, 0];
 var end = [0, 0, 255];
 document.body.style.backgroundColor = daytimeColor(start, end);

http://jsfiddle.net/yckart/gyX3K/

于 2013-11-05T02:21:07.273 に答える