1

私はいくつかのアイデアを試していて、現在、Web ページの特定の要素のスタイルをランダム化するサイト レイアウトのアイデアを持っています。たとえば、1 ページに 10 個の段落がある場合、各段落のフォント サイズ、ファミリー、色をランダムにしたいと思います。

これらのスタイルは、動的に生成されるか、スタイルシートに存在する一連のランダムなスタイルから取得されます。

これを達成するための最も優れた解決策について誰かがアイデアを持っている場合は、すべての考えを喜んで受け取ります。おそらく私は間違った用語を探していますが、これまでのところ、Google は私に考える材料を与えてくれませんでした.

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

一連の 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);
    });
});

おそらく「each」を反復する最良の方法ではありませんが、アイデアは得られます。

JSFiddleここ

于 2013-10-02T14:27:16.563 に答える
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 を使用する場合は、次のように呼び出される 6 つの異なるクラスを 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 に答える