0

ウェブサイトの背景の色が数秒ごとにランダムに変わるようにしようとしています。ランダムな色に変更することはできますが、ループさせるにはどうすればよいですか?

<script type="text/javascript">
$(document).ready(function() {

    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';  

    function colourSet(){
       $("body").animate({ backgroundColor: hue}, 2000);
    }   

    colourSet();

});
</script>
4

3 に答える 3

5

関数自体を独自の完了ハンドラとして登録するだけで、ループさせることができます。

function colourSet() {
   var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; 
   $("body").animate({ backgroundColor: hue}, 2000, colourSet);
}

注意: 色相は関数内で選択する必要があります。そうしないと、毎回同じ色のままになります。

ちょっとした楽しみとして、いくつかの Javascript ハック (エヘム) を使用して色相コードを少し短くすることもできます。

function r() { return ~~(256 * Math.random()) };
function colourSet() {
   var hue = 'rgb(' + [r(), r(), r()] + ')';
   $("body").animate({ backgroundColor: hue}, 2000, colourSet);
}

これは、浮動小数点を整数に変換するためのビットごとの~(「not」) 演算子の 2 つの使用を利用します。また、配列を文字列に連結すると、配列に対して a が自動的に実行されるため.toString()、カンマ区切りのリストが生成されます。

于 2013-01-17T21:43:32.947 に答える
3

を使ってみてくださいsetInterval。下記参照、

$(document).ready(function() {

    setInterval(function () {
       var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';  
       colourSet(hue);
    }, 30000); //30 seconds

    function colourSet(hue){
       $("body").animate({ backgroundColor: hue}, 2000);
    }   
});
于 2013-01-17T21:43:19.593 に答える
1

使用setInterval機能

<script type="text/javascript">
$(document).ready(function() {

    setInterval(function(){
        var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';  

        function colourSet(){
           $("body").animate({ backgroundColor: hue}, 2000);
        }   

        colourSet();
    },60000 /* 60 seconds */);
});
</script>

于 2013-01-17T21:43:20.743 に答える