1. 简介
随机报价生成器是一个简单的Web应用程序，它能够随机生成各种行业和场景下的报价。 在本文中，我们将使用HTML、CSS和JavaScript来构建一个随机报价生成器。
2. HTML结构
我们需要为我们的Web应用程序创建一个简单的HTML结构。在“body”中，我们将包含一个标题、一个报价文本区域和一个生成新报价的按钮。
<body>
<h3>随机报价生成器</h3>
<div>
<p id="quote-text"></p>
<p id="quote-author">- <span id="author"></span></p>
</div>
<button id="new-quote-btn">生成新报价</button>
</body>
3. CSS样式
让我们使用CSS样式为我们的Web应用程序添加一些美感。 我们将使用Flexbox布局来居中我们的报价文本和按钮，并为其添加一些基本样式。
body {
background-color: #f9f9f9;
font-family: sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
h3 {
margin-top: 0;
color: #333333;
}
div {
background-color: #ffffff;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
text-align: center;
}
p#quote-text, p#quote-author {
font-size: 22px;
font-style: italic;
margin-bottom: 10px;
}
span#author {
font-weight: bold;
}
button#new-quote-btn {
background-color: #008CBA;
color: #ffffff;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
button#new-quote-btn:hover {
background-color: #007096;
}
4. JavaScript代码
现在我们需要添加JavaScript代码，来完成生成随机报价的逻辑。我们可以创建一个引用报价的数组，并使用JavaScript中的“Math.random”方法来随机选择数组中的一项。 我们还要实现一个函数，用于在单击“生成新报价”按钮时更新报价文本和作者名称。
const quotes = [
{
quote: "成功是努力的另一个名字。",
author: "沃伦·巴菲特"
},
{
quote: "成功是跑出来的，全靠自己的两腿。",
author: "孙笑川"
},
{
quote: "成功就是把复杂的问题简单化，然后狠狠去做。",
author: "刘慈欣"
},
{
quote: "成功是一种观念，成功是一个习惯，而不是偶然。",
author: "亚伯拉罕·林肯"
},
{
quote: "只要你在乎，你就一定能做得好。",
author: "乔布斯"
},
{
quote: "长风破浪会有时，直挂云帆济沧海。",
author: "李白"
}
];
function getRandomQuote() {
const randomNumber = Math.floor(Math.random() * quotes.length);
return quotes[randomNumber];
}
function displayQuote() {
const { quote, author } = getRandomQuote();
document.getElementById('quote-text').innerHTML = quote;
document.getElementById('author').innerHTML = author;
}
displayQuote();
document.getElementById('new-quote-btn').addEventListener('click', displayQuote);
5. 总结
到这里，我们已经成功的构建了一个简单的随机报价生成器。我们使用HTML创建了基本的页面结构，使用CSS样式美化了页面，使用JavaScript实现了随机选择报价、更新报价文本和作者名称的逻辑。这个应用程序很简单，但是它展示了如何将HTML、CSS和JavaScript结合起来创建一个实用的应用程序。