我是编程新手。我这里有我的javascript代码。它工作正常，但我想要一个不同的风格。
此代码是随机引用生成器。
<html>
<head>
<title>
Daily Quotes
</title>
</head>
<h1>Inspirational Quotes</h1>
<body>
<script language="JavaScript">
var quoteGroups=70;
var quoteNum;
var theQuote=new Array();
theQuote[0]='Whenever you see a successful business, someone once made a courageous decision. - Peter Drucker';
theQuote[1]='If you\'re not part of the solution, you\'re part of the problem. - African Proverb';
theQuote[2]='When you confront a problem you begin to solve it. - Rudy Giuliani';
theQuote[3]='I dream of painting and then I paint my dream. - Vincent Van Gogh';
theQuote[4]='Be silent or let thy words be worth more than silence. - Pythagoras';
theQuote[5]='The past cannot be changed. The future is yet in your power. - Mary Pickford';
theQuote[6]='Anything\'s possible if you\'ve got enough nerve. - J.K. Rowling';
var quoteNum = Math.round(Math.random() * quoteGroups);
document.write(theQuote[quoteNum]);
</script>
<div>
<button style="background-color:lightgreen;width:230;height:70;border: none; font: bold 25px GreatVibes;" onclick="history.go(0)">Inspire Me More!</button>
</div>
<div>
<button style="background-color:blue;width:200;height:70" onclick=>Share</button>
</div>
</body>
<img src="images/bg.jpg" id="bg" alt="">
</html>
例如，上面的代码将生成随机引号。现在，如何通过单击此代码中的按钮更改字体系列？
提前致谢。
答案 0 :(得分：1)
看着这个：
<button style="background-color:blue;width:200;height:70" onclick=>Share</button>
您没有设置onclick的功能。做类似的事情：
<button style="background-color:blue;width:200;height:70" onclick="changeFont(this, 'font name');">Share</button>
changeFont:
function changeFont(element, name) {
element.style.fontFamily = name;
}
答案 1 :(得分：0)
有待改进的地方：
document.write，而是在HTML中预留一个元素，您将使用引号填充该元素，分配给textContent; round，但floor，否则您可能会产生超出范围的值theQuote.length style个值，而是使用CSS类要动态设置字体，您可以保留一些CSS类供选择，甚至可以随机选择。
以下是它的工作原理：
function displayQuote() {
var theQuote= [
"Whenever you see a successful business, someone once made a courageous decision. - Peter Drucker",
"If you're not part of the solution, you're part of the problem. - African Proverb",
"When you confront a problem you begin to solve it. - Rudy Giuliani",
"I dream of painting and then I paint my dream. - Vincent Van Gogh",
"Be silent or let thy words be worth more than silence. - Pythagoras",
"The past cannot be changed. The future is yet in your power. - Mary Pickford",
"Anything's possible if you've got enough nerve. - J.K. Rowling"
];
var quoteNum = Math.floor(Math.random() * theQuote.length);
var clsName = "special" + Math.floor(Math.random() * 3); // choose random font style
quote.textContent = theQuote[quoteNum];
quote.className = clsName;
}
next.onclick = displayQuote; // execute on click
displayQuote(); // execute on page load.shareButton {
background-color:blue;
width:200;
height:70
}
.inspireButton {
background-color:lightgreen;
width:230;
height:70;
border: none;
font: bold 25px GreatVibes;
}
.special0 {
font-family: Georgia;
font-size: 24px;
color: #444;
}
.special1 {
font-family: Calibri;
font-size: 32px;
color: #844;
}
.special2 {
font-family: Tahoma;
font-size: 28px;
color: #484;
}<div id="quote">
</div>
<div>
<button id="next" class="inspireButton">Inspire Me More!</button>
</div>
答案 2 :(得分：0)
当你是新手时，最好不要养成不幸的习惯，不幸的是很容易做到，因为那里的大部分代码都是由那些不知道更好的人复制和粘贴的，所以：
尽量不要像这样编写内联样式或内联事件处理程序：
<button style="background-color:lightgreen;width:230;height:70;border: none; font: bold 25px GreatVibes;" onclick="history.go(0)">Inspire Me More!</button>
正如您所看到的，它使代码难以阅读，因为该元素中有3种语言！
相反，请将您的语言分成各自的部分，甚至是文件。
关于CSS样式，最好提前定义CSS类，然后切换到所需的类，而不是编写所有内联CSS。
您的代码中也有一些错误。
所以，这是代码的更新版本，它也会更改字体。请务必查看评论以获取详细信息。
<html>
<head>
<title>Daily Quotes</title>
<style>
/* We'll separate the CSS into this section and prepare pre-made classes for styles.
See how much cleaner this is, not only here but in the HTML as well? */
button {
background-color:lightgreen;
width:230;height:70;
border: none;
font: bold 25px GreatVibes;
}
.share {
background-color:blue;
width:200px; /* Don't forget to add the unit */
height:70px; /* Don't forget to add the unit */
}
#output {
/* Now, just the output area has its own style! */
font-family: fantasy;
}
</style>
</head>
<body>
<!-- All your content must be between the opening and closing body tags. -->
<h1>Inspirational Quotes</h1>
<div>
<button>Inspire Me More!</button>
</div>
<div>
<button class="share">Share</button>
<img src="images/bg.jpg" id="bg" alt="">
</div>
<!-- Don't use document.write() to inject content into a page. Instead, prepare an
element ahead of time that you will update later. -->
<div id="output"></div>
<!-- Place your script tags just before the closing of the body tag. That way, you can be
sure that any HTML element you reference in the script has already been read into memory. -->
<script>
// First, get references to the HTML elements you'll want to work with:
var btn = document.querySelector("button");
var out = document.getElementById("output");
// Then, set up your event handlers in JavaScript, not in HTML
btn.addEventListener("click", getQuote);
function getQuote(){
// Here's a simpler way to set up an array:
var theQuotes= [
'Whenever you see a successful business, someone once made a courageous decision. - Peter Drucker',
'If you\'re not part of the solution, you\'re part of the problem. - African Proverb',
'When you confront a problem you begin to solve it. - Rudy Giuliani',
'Dream of painting and then I paint my dream. - Vincent Van Gogh',
'Be silent or let thy words be worth more than silence. - Pythagoras',
'The past cannot be changed. The future is yet in your power. - Mary Pickford',
'Anything\'s possible if you\'ve got enough nerve. - J.K. Rowling'
];
// You only want your radom number to be from 0 to the amount of the quotes array -1
var quoteNum = Math.floor(Math.random() * theQuotes.length);
// Now, just update the prexisting element:
output.textContent = theQuotes[quoteNum];
}
</script>
</body>
</html>
答案 3 :(得分：0)
简而言之，这是一个有效的例子：
<body onload="generateRandomQuote()">
<h1>Inspirational Quotes</h1>
<div id="quote-holder" style="font-family: sans-serif; color: red;">
</div>
<div>
<button style="background-color: lightgreen; width:230px; height:70px; border: none; font: bold 25px GreatVibes;" onclick="generateRandomQuote()">Inspire Me More!</button>
</div>
<button style="background-color: blue; width: 200px; height: 70px" onclick="">Share</button>
<img src="images/bg.jpg" id="bg" alt="">
<script>
var quoteHolder = document.getElementById('quote-holder');
var theQuote = [
'Whenever you see a successful business, someone once made a courageous decision. - Peter Drucker',
'If you\'re not part of the solution, you\'re part of the problem. - African Proverb',
'When you confront a problem you begin to solve it. - Rudy Giuliani',
'I dream of painting and then I paint my dream. - Vincent Van Gogh',
'Be silent or let thy words be worth more than silence. - Pythagoras',
'The past cannot be changed. The future is yet in your power. - Mary Pickford',
'Anything\'s possible if you\'ve got enough nerve. - J.K. Rowling'
];
function generateRandomQuote() {
var quoteIndex = Math.floor((Math.random() * theQuote.length));
quoteHolder.innerHTML = theQuote[ quoteIndex ];
}
</script>
</body>
我知道你已经有了回答。