-1
2秒ごとにボディの背景色を変更するWebページを設定しました。私が苦労してきたのはトランジション効果をsetInterval
メソッドに統合する方法です。 CSSのトランジションプロパティと同様に、新しい色をフェード効果で表示します。 これらの変更/切り替えの背景色に対して、どのようにこの効果を達成できますか?JavaScriptでsetIntervalメソッドを使ってTRANSITIONエフェクトを実現する方法は?
は、ここに私のコードです:あなたが移行したいし、それがどのくらいの時間がかかりますプロパティtransition property指定を設定し
var startButton = document.getElementById("startButton");
var body = document.getElementById("body");
// Click Event Listener
startButton.addEventListener("click", function() {
setInterval(function() {
body.style.backgroundColor = generateRandomColors();
}, 2000);
});
// GENERATE Random Colors
function generateRandomColors() {
var arr = [];
arr.push(pickRandomColor());
return arr;
}
// PICK Random Color
function pickRandomColor() {
// Red
var r = Math.floor(Math.random() * 256);
// Green
var g = Math.floor(Math.random() * 256);
// Blue
var b = Math.floor(Math.random() * 256);
// RGB
var rgb = "rgb(" + r + ", " + g + ", " + b + ")";
return rgb;
}
<html>
<body id="body">
<button id="startButton">Start</button>
</body>
</html>
;'だけ '')(pickRandomColorを返します。 – gurvinder372