0

我有以下代码，它随机化数组中的文本。

但是我不确定如何执行以下操作。

  1. 在浏览器加载而不是 onclick 时显示结果。
  2. 在加载时将输出显示到 div 类（因此，如果我有多个称为“输出”的 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);

    您甚至可以使用两者的组合：附加到两者，并且run仅在尚未完成时才执行。

  2. class您可以使用给定的using找到所有元素document.getElementsByClassName。然后，您可以遍历返回的集合并为每个集合指定一个随机字体。

  3. （和 4。）而不是构造一些 HTML 和 CSS 字符串，您可以使用style属性来代替权重和大小。例如：

    element.style.fontWeight = 'bold';

    对于字体系列，选择一个类并附加一个空格，然后将其添加到元素的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 回答