0

配列からテキストをランダム化する次のコードがあります。

ただし、次のことを行う方法がわかりません。

  1. onclick ではなくブラウザのロード時に結果を表示します。
  2. ロード時に出力をdiv CLASSに表示します（したがって、「出力」と呼ばれる複数のdivがある場合、ランダムなフォント/サイズ/ウェイトが各divに表示されます）
  3. フォント名などを使用する代わりに、各 div 要素からフォントを取得し、クラスなどを変更する必要があります。
  4. 配列内のフォント名を使用する代わりに、各変数をクラスにポイントするにはどうすればよいですか? .font1 {font-family:Verdana, Geneva, sans-serif;} .font2 {font-family:Georgia, "Times New Roman", Times, serif;} .font3 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;} .font4 {font-family:"Times New Roman", Times, serif;} .font5 {font-family:"Comic Sans MS", cursive;} var fonts = ['.font1', '.font2', '.font3', '.font4', '.font5'];

誰かが助けてくれることを本当に願っています。

コードは次のとおりです。

<button onclick="run()">Test</button>
<div id="output"/>

var fonts = ['Arial', 'Helvetica', 'Georgia', 'Tahoma', 'Verdana'];
var weights = ['normal', 'bold', 'lighter'];
var sizes = ['16px', '20px', '24px', '36px', '40px'];

var choose = function(arr) {
return arr[Math.floor(Math.random() * arr.length)];
};
var output = document.getElementById("output");

window.run = function() {
var text = choose(sizes) + ' ' + choose(weights) + ' '  +  choose(fonts);
output.innerHTML = '<div class="randomFont" style="font: ' + text + '">' + text +      '</div>';
}
4

2 に答える 2

1

  1. loadイベント リスナーをウィンドウイベントにアタッチできます。

    window.addEventListener('load', run, false);

    さらに良いことに、ターゲットにしているブラウザーがそれをサポートしている場合は、 を使用できますDOMContentLoaded。これは、画像、スタイルシート、およびその他のあまり重要でないリソースが読み込まれるのを待ちません:

    document.addEventListener('DOMContentLoaded', run, false);

    2 つを組み合わせて使用​​することもできます。両方に接続し、 ではrun、まだ実行されていない場合にのみ実行します。

  2. class指定されたusing を持つすべての要素を見つけることができますdocument.getElementsByClassName。次に、返されたコレクションを繰り返し処理し、それぞれにランダムなフォントを与えることができます。

  3. (および 4.) HTML と CSS 文字列を作成する代わりstyleに、重みとサイズのプロパティを使用できます。例えば：

    element.style.fontWeight = 'bold';

    フォント ファミリについては、クラスの 1 つを選択し、スペースを追加してから要素のclassNameプロパティに追加します。

    element.className += ' ' + fontFamilyClass;

やってみて。

于 2012-11-25T21:07:22.333 に答える
0

スタイルを簡略化して作成していますが、指定する順序が間違っており、サイズがファミリの前にある必要があります。適切な方法は<div style=bold 16px Verdana></div>

これが実際の例です：

http://jsfiddle.net/7egCK/2/

これをロード時に実行したい場合は、Body の onLoad イベントで HTML レンダリング関数を実行するだけです。

<body onLoad="run()">
于 2012-11-25T21:08:21.770 に答える