Question

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

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

如果有人对实现这一目标的最佳解决方案有任何想法，那么所有的想法都会被感激地接受，也许我正在寻找错误的条款，但到目前为止谷歌并没有真正给我任何思考。

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

您可以定义一堆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

Answer 3

如果你想确保段落中的每个样式都是唯一的，你应该创建一个包含你想要应用于每个元素的所有样式的数组并将它们随机播放：

<强> 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 4

如果你想使用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);

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

4 个答案: