文章摘要
这篇文章介绍了一种在网页上动态生成随机颜色方块的技术。通过JavaScript代码，在网页加载时初始化并随机生成100个方块，每个方块随机设置位置、大小和颜色。方块的动态效果通过定时器函数实现，每隔一定时间重新随机化方块的属性。这种技术可以用于动态视觉效果的展示或教学演示，利用简单的代码实现丰富的图形效果。
CAPTION=”no”
SCROLL=”no”
SHOWINTASKBAR=”no”
INNERBORDER=”no”
CONTEXTMENU=”no”
BORDER=”none”
SINGLEINSTANCE=”yes”
WINDOWSTATE=”maximize”
>
var timer = 100;
var randDiv = new Array(100);
window.onload = function()
{
for(var i = 0; i < randDiv.length; i++)
{
randDiv[i] = document.createElement(“DIV”);
randDiv[i].style.cssText = “filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);”;
randDiv[i].style.position = “absolute”;
randDiv[i].style.background = GetRandomColor();
document.body.appendChild(randDiv[i]);
}
Fun();
}
function Fun()
{
for(var i = 0; i < randDiv.length; i++)
{
randDiv[i].style.top = Math.floor(Math.random() * window.screen.height);
randDiv[i].style.left = Math.floor(Math.random() * window.screen.width);
randDiv[i].style.width = Math.floor(Math.random() * 100);
randDiv[i].style.height = Math.floor(Math.random() * 100);
randDiv[i].style.background = GetRandomColor();
}
setTimeout(“Fun()”, timer);
}
function GetRandomColor()
{
var r = Math.floor(Math.random() * 255).toString(16);
var g = Math.floor(Math.random() * 255).toString(16);
var b = Math.floor(Math.random() * 255).toString(16);
r = r.length == 1 ? “0” + r : r;
g = g.length == 1 ? “0” + g : g;
b = b.length == 1 ? “0” + b : b;
return “#” + r + g + b;
}
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
