我有这个页面,其中有 3 个完全由 CSS 制成的三角形。每次有人加载页面时,我都希望三角形具有不同的大小。
这是JSFiddle中说明的内容: http://jsfiddle.net/qaF24/4/
我想做的是在页面加载时随机设置每个三角形的border-width
值。
我正在考虑用带有Math.random
或其他东西的JavaScript来做到这一点,但我没有设法做到这一点,也没有在互联网上找到一些帮助(我不知道如何用Javascript编写)。
[编辑] 我忘了说我想添加一个min
和max
值。
我将不胜感激对此的一点帮助或指导。多谢
这是 jsfiddle http://jsfiddle.net/qaF24/5/,只需Math.random()
用
我所做的是:
- 介于 0 和 1 之间的随机值并将其乘以 100(您将获得 0 到 100px 之间的边框宽度(以 px 为单位)
- set 是作为站点上每个"div"的 CSS 属性
尝试在声明变量@var: Math.random();
LESS
然后在border-width : @var;
示例代码:
var triangle = document.querySelector("div");
for (var i = 0; i < triangles.length; ++i)
{
triangle[i].style.borderWidth = Math.round(Math.random()*200) + "px";
}
㧪
- 三角形是一个
node list
。它包含使用document.querySelector
选择的所有div
节点。 - 对于LUS迭代每个
div
。 div
index
的三角形[i]被打开并访问样式属性。- 在
0
和200
之间生成随机值,并向上或向下舍入为整数。
当然,您的代码使用不同的边框宽度,但这应该可以帮助您入门。
奖励:您可以使用它来选择各个div:
document.querySelector("div[class='color']")[0]; //replace color with the colour class names you use.
[0]
是节点列表的第一个元素。由于它只包含一个元素,因此我们可以使用此快捷方式。
ids
而不是 classes
,则可以使用 document.getElementById
,则此问题会更容易解决。我建议你用ids
代替你的classes
。
第 1 部分:获得随机border-width
.
为此,请使用您在问题中建议的Math.random
。请注意,使用 Math.random
返回一个介于 0 到 1 之间的值。由您决定您希望边界的范围。对于我的回答,我将只使用一系列5 pixels
但您可以根据需要更改该值。因此,要获得一个范围不超过 5 的值,您需要将Math.random()
乘以 5。不过要小心!您需要将其转换为字符串才能更改 CSS。
var randomWidth = Math.random()*5;
var width = randomWidth.toString();
第 2 部分:设置三角形的border-width
。要更改border-width
,请对 3 个ids
执行此操作:
document.getElementById("red").style.borderWidth = width + "px";