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 回答