Случайное значение CSS

Question

У меня есть эта страница, где у меня есть три треугольника, сделанные исключительно из CSS. Каждый раз, когда кто-то загружает страницу, я хочу, чтобы треугольник имел разные размеры.

Вот что показано в JSFiddle: http://jsfiddle.net/qaF24/4/

То, что я хотел бы сделать, это случайно установить значение border-width каждого треугольника на странице загрузки.

Я думал об этом с помощью JavaScript с Math.random или что-то в этом роде, но мне не удалось это сделать и не нашел помощи в Интернете (я не знаю, как писать в Javascript).

[EDIT] Я забыл сказать, что хотел бы добавить значение min и max.

Буду признателен за небольшую помощь или руководство для этого. Большое спасибо

Answer 1

Вот jsfiddle http://jsfiddle.net/qaF24/5/ с просто Math.random() использования

Что я сделал это:

• случайное значение между 0 и 1 и умножить его на 100 (вы получите ширину границы в px betwen 0 и 100px)
• набор как CSS свойство каждого `DIV» на сайте

Answer 2

вы можете попробовать использовать LESS вы объявляете переменную @var: Math.random();, а затем в вашем

Answer 3

пример кода:

var triangle = document.querySelector("div"); 
for (var i = 0; i < triangles.length; ++i) 
{ 
    triangle[i].style.borderWidth = Math.round(Math.random()*200) + "px"; 
} 

ломаются

1. треугольник является node list. Он содержит все узлы div, выбранные с помощью document.querySelector.
2. для lus итераций за каждые div.
3. triangle [i] где index is div открыт и имеет свойство стиля.
4. Произвольное значение генерируется между 0 и 200 и округлено вверх или вниз до целого числа.

Конечно, ваш код использует разную ширину границы, но это должно вас начать.

Бонус: вы можете использовать это, чтобы выбрать отдельные дивы:

document.querySelector("div[class='color']")[0]; //replace color with the colour class names you use. 

[0] является первым элементом списка узлов. Поскольку он содержит только один элемент, мы можем использовать этот короткий отрезок.

Answer 4

Эта проблема будет проще решить, если вы использовали ids вместо classes, чтобы вы могли использовать document.getElementById. Я предлагаю вам вместо этого заменить classes на ids.

Часть 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";