我有以下代码,它随机化数组中的文本。
但是我不确定如何执行以下操作。
- 在浏览器加载而不是 onclick 时显示结果。
- 在加载时将输出显示到 div 类(因此,如果我有多个称为“输出”的 div,则每个 div 中将显示随机字体/大小/粗细)
- 它应该从每个 div 元素中获取字体并更改类等,而不是使用字体名称等。
- 我如何将每个变量指向一个类,而不是使用数组中的字体名称?.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>';
}