如何最好地在同一页面上显示不同文本元素的随机样式？ [关闭]

Question

我只是在尝试一些想法，目前有一个网站布局的想法，其中涉及随机化网页上特定元素的样式。例如，如果我在一页上有 10 个段落，我希望每个段落有一个随机的字体大小、系列和颜色。

这些样式可以动态生成，也可以取自样式表中的一组随机样式。

如果有人对实现这一目标的最简洁的解决方案有任何想法，所有想法都将不胜感激，也许我正在寻找错误的术语，但到目前为止，Google 并没有真正给我任何思考。

Answer 1

使用js，可以得到一个包含所有想要样式的元素的数组，然后使用Math.random()设置随机大小，例如：

//using jquery, but you can do the same with js
$('p').each(function(){
    var rand =  Math.floor((Math.random()*100)+1);
    $(this).css('font-size',rand);
}); 

SEE FIDDLE

Answer 2

如果您想确保段落中的每个样式都是唯一的，您应该创建一个包含您想要应用到每个元素的所有样式的数组并打乱它们：

JSFiddle

---

HTML

<div class="myParagraphs">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

Javascript（Fisher-Yates shuffle algorithm提供代码here）

打乱一组 CSS 类名并将它们应用到您的段落中。

/* Fisher-Yates Shuffle                          */
/* See https://stackoverflow.com/a/6274398/464188 */
function shuffle(array) {
    var counter = array.length, temp, index;

    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        index = Math.floor(Math.random() * counter);

        // Decrease counter by 1
        counter--;

        // And swap the last element with it
        temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
    }

    return array;
}

var stylesArray = ["class1", "class2", "class3"];
var myStyles = shuffle(stylesArray);

$('.myParagraphs > p').each(function(index, value) {
    $(this).addClass(myStyles[index]);
});

CSS

.class1 {
    color: green;
}

.class2 {
    color: red;
}

.class3 {
    color: orange;
}

Answer 3

如果你想使用 javascript，你可以在 css 中创建六个不同的类，如下所示：

.paragraph_1 {font-size: 10px;}
.paragraph_2 {font-size: 12px;}
.paragraph_3 {font-size: 14px;}
.paragraph_4 {font-size: 16px;}
.paragraph_5 {font-size: 18px;}
.paragraph_6 {font-size: 20px;}

在 javascript 中添加元素时使用：

var htmlcontent = "";
for(var i=0; i<paragraphs_count;i++){
   var rdn_number = 1 + Math.floor(Math.random() * 6);
   htmlcontent += "<p class='paragraph_"+rdn_number+"'>your text here</p>";
}
$("#container").html(htmlcontent);

Answer 4

你可以定义一堆css类：

.style-one {
    font-size: 1.2em;
    color: blue;
}

.style-two {
    font-size: 1.1em;
    color: green;
}

.style-three {
    font-size: 1.5em;
    color: red;
}

然后定义一个保存类名的javascript数组。

var myStyles = ["style-one", "style-two", "style-three"];

并在文档加载时随机应用样式：

$(document).ready(function(){
    $('p').each(function(){ // selects all paragraphs
        var myClass = myStyles[Math.floor(Math.random()*myStyles.length)];  // get a random index from 0 to 2
        $(this).addClass(myClass);
    });
});

可能不是使用“每个”进行迭代的最佳方式，但您明白了。

JSFiddle here