1

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

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

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

4

4 回答 4

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);
});

见小提琴

于 2013-10-02T14:30:47.297 回答
0

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

JSFiddle

HTML

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

Javascript（此处提供Fisher-Yates 洗牌算法代码）

打乱一组 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;
}
于 2013-10-02T14:30:16.227 回答
0

如果你想使用 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);
于 2013-10-02T14:30:41.670 回答
0

你可以定义一堆 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在这里

于 2013-10-02T14:27:16.563 回答