html如何变幻网页颜色,HTML5 颜色变幻的帆布

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

app = {

colors: ["#FF0095",

"#0014AD",

"#00FFA6",

"#00FBFF",

"#99FF00",

"#DDFF00",

"#FF9100",

"#FF3700",

"#FF0019",

"#6600FF",

"#00FF40",

"#FFAE00",

"#DAFF9E"

],

};

$(document).ready(function() {

console.log($(window).width());

console.log($(window).height());

app.gridWidth = 20;

app.boxWidth = Math.round($(window).width() / app.gridWidth);

app.gridHeight = Math.ceil($(window).height() / app.boxWidth);

app.gridTotal = app.gridWidth * app.gridHeight;

for (var i = 0; i < app.gridTotal; i++) {

var newBox = $("

var boxChild = $("

newBox.append(boxChild);

$("section").append(newBox);

}

changeAllColors();

});

function changeAllColors() {

setTimeout(changeAllColors, 500);

$("section>div").each(function() {

var colorClass = app.colors[Math.floor(Math.random() * app.colors.length)];

$(this).css({

"width": app.boxWidth,

"height": app.boxWidth,

"background": colorClass

});

});

$("section>div>div").each(function() {

var colorBorder = app.colors[Math.floor(Math.random() * app.colors.length)];

var borderTransparent = (app.boxWidth / 2) + "px solid transparent";

var borderColored = (app.boxWidth / 2) + "px solid " + colorBorder;

var borderRoulette = [borderTransparent, borderColored];

$(this).css({

"border-top": borderRoulette[Math.round(Math.random())],

"border-right": borderRoulette[Math.round(Math.random())],

"border-bottom": borderRoulette[Math.round(Math.random())],

"border-left": borderRoulette[Math.round(Math.random())]

});

});

}