function getSizes(baseSize, sVariance) {
var sizes = [];
for (i = 0; i < 5; i++) {
sizes[i] = Math.ceil(baseSize - (Math.random() * sVariance));
}
return sizes;
}
function calculateOpacityValues(baseSize, sVariance) {
var min = 0.25, max = 1,
step = 0.75 / sVariance, i,
opacityValues = {};
for (i = 0; i <= sVariance; i++) {
opacityValues[baseSize - i] = min + step * i;
}
return opacityValues;
}
function getOpacities(sizes, opacityValues) {
// create a map of opacities
// and your expected values
var opacities = [];
sizes.forEach(function(value, index) {
opacities[index] = opacityValues[value];
});
return opacities;
}
var baseSize = 60, sVariance = 3,
sizes = getSizes(baseSize, sVariance);
console.log(sizes);
// use the map to get the opacity
console.log(getOpacities(sizes, calculateOpacityValues(baseSize, sVariance)));
您可以在这里看到它的实际应用。它使用旧版浏览器不支持的forEach构造,但如果需要,您可以将其切换到普通的 for 循环。getSizes
通过移动方法中的所有生成逻辑和方法中的所有不透明度计算,我还稍微重构了您的代码getOpacities
。
在旁注中,您应该console.log
用于调试(这会在 FireFox 上的 FireBug 控制台、Chrome WebInspector 窗口或 IE 开发控制台中记录)。这比document.write
(即使我们不在这里讨论,这也适用alert
于这种情况)要好得多。
编辑
您没有提到是否希望baseSize
andvariance
是可变的。在这种情况下,您应该添加一个方法来根据您的逻辑生成不透明度值图。
我已在示例中添加了您要求的逻辑,并更新了代码。