🌟 前言
欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍
🤖 洛可可白：个人主页
🏠 个人博客：洛可可白博客
🐱 代码获取：bestwishes0203
📷 封面壁纸：洛可可白wallpaper
文章目录
Web实现名言生成器：JavaScript DOM基础与实例教程
名言生成器是一个简单而有趣的Web应用，它可以随机显示历史上著名人物的名言。通过这个教程，我们将学习如何使用JavaScript DOM API来实现这个功能，并介绍相关的JavaScript DOM基础知识。
JavaScript DOM基础
DOM（Document Object Model）是HTML文档的编程接口，它允许我们通过JavaScript访问和操作网页元素。在JavaScript中，我们可以使用DOM API来获取元素、修改内容、绑定事件等。
实例：名言生成器
实现效果
体验地址：
创建HTML结构
首先，我们需要创建一个包含名言显示区域和生成按钮的HTML结构。
<div class="quote-box">
<p class="text">这是名言部分</p>
<p class="author">我是作者</p>
<button id="new-quote">生成名言</button>
<a class="tweet-quote" href="https://blink.csdn.net/">分享到 CSDN&Blink</a>
</div>
编写JavaScript逻辑
初始化名言列表
在JavaScript中，我们首先定义一个包含名言和作者的数组。
const quotes = [
{
quote: "生命不止，奋斗不息。",
author: "方志敏",
},
{
quote: "知识就是力量。",
author: "李约瑟",
},
// ... 更多名言和作者列表 ...
];
获取随机名言
定义getRandomQuote函数来从名言列表中随机获取一条名言。
function getRandomQuote() {
const index = Math.floor(Math.random() * quotes.length);
return quotes[index];
}
更新名言显示
定义一个事件监听器，当用户点击“生成名言”按钮时，调用getRandomQuote函数获取新的名言，并更新页面上的内容。
document.querySelector("#new-quote").addEventListener("click", function () {
const quote = getRandomQuote();
const textElement = document.querySelector(".text");
const authorElement = document.querySelector(".author");
textElement.innerText = quote.quote;
authorElement.innerText = `- ${quote.author}`;
});
样式美化
为了让名言生成器看起来更美观，我们可以添加一些CSS样式。
/* ... 样式代码 ... */
.quote-box {
width: 500px;
margin: 100px auto;
padding: 30px;
border-radius: 5px;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
}
.text {
font-size: 24px;
font-style: italic;
margin-bottom: 20px;
}
.author {
font-size: 18px;
text-align: right;
}
#new-quote {
background-color: #4caf50;
color: #fff;
border: none;
padding: 10px 20px;
margin-top: 20px;
border-radius: 5px;
cursor: pointer;
}
.tweet-quote {
display: block;
text-align: right;
margin-top: 10px;
color: #4caf50;
}
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>洛可可白😁名言生成器</title>
<style>
.quote-box {
width: 500px;
margin: 100px auto;
padding: 30px;
border-radius: 5px;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
}
.text {
font-size: 24px;
font-style: italic;
margin-bottom: 20px;
}
.author {
font-size: 18px;
text-align: right;
}
#new-quote {
background-color: #4caf50;
color: #fff;
border: none;
padding: 10px 20px;
margin-top: 20px;
border-radius: 5px;
cursor: pointer;
}
.tweet-quote {
display: block;
text-align: right;
margin-top: 10px;
color: #4caf50;
}
</style>
</head>
<body>
<div class="quote-box">
<p class="text">这是文言部分</p>
<p class="author">我是作者</p>
<button id="new-quote">生成名言</button>
<a class="tweet-quote" href="https://blink.csdn.net/"
>分享到 CSDN&Blink</a
>
</div>
</body>
<script>
const quotes = [
{
quote: "生命不止，奋斗不息。",
author: "方志敏",
},
{
quote: "知识就是力量。",
author: "李约瑟",
},
{
quote: "先苦后甜，后苦变甜；先甜后苦，后甜变苦。",
author: "林语堂",
},
{
quote: "成功是一份耕耘，而非一次得手。",
author: "贾平凹",
},
{
quote: "宝剑锋从磨砺出，梅花香自苦寒来。",
author: "陆游",
},
{
quote: "宝剑不磨，其锋不利；人不学习，其智不明。",
author: "李光耀",
},
{
quote: "一份耕耘，一份收获；一份付出，一份回报。",
author: "王阳明",
},
{
quote: "只要功夫深，铁杵磨成针。",
author: "李白",
},
{
quote: "有志者事竟成。",
author: "龚自珍",
},
{
quote: "天道酬勤。",
author: "韩愈",
},
{
quote: "千里之行始于足下。",
author: "老子",
},
{
quote: "路漫漫其修远兮，吾将上下而求索。",
author: "屈原",
},
{
quote: "读书破万卷，下笔如有神。",
author: "李白",
},
{
quote: "吃一堑，长一智。",
author: "佚名",
},
{
quote: "先天下之忧而忧，后天下之乐而乐。",
author: "范仲淹",
},
{
quote: "一寸光阴一寸金，寸金难买寸光阴。",
author: "陈毅",
},
{
quote: "不积跬步，无以至千里；不积小流，无以成江海。",
author: "荀子",
},
{
quote: "前事不忘，后事之师。",
author: "司马迁",
},
{
quote: "生命中最大的浪费是把时间浪费在了等待上。",
author: "李开复",
},
];
function getRandomQuote() {
const index = Math.floor(Math.random() * quotes.length);
return quotes[index];
}
document.querySelector("#new-quote").addEventListener("click", function () {
const quote = getRandomQuote();
const textElement = document.querySelector(".text");
const authorElement = document.querySelector(".author");
textElement.innerText = quote.quote;
authorElement.innerText = `- ${quote.author}`;
});
</script>
</html>
结语
通过上述步骤，我们实现了一个简单的名言生成器。这个实例展示了如何使用JavaScript DOM API来操作HTML元素，并响应用户事件。通过这个项目，你可以更好地理解DOM操作的基本概念和方法，以及如何在实际项目中应用它们。名言生成器是一个入门级的编程项目，适合初学者练习和提升编程技能。
如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀
🎉 往期精彩回顾
Web实现表格单选全选与反选操作：JavaScript DOM基础与实例教程
- 688阅读 · 14点赞 · 7收藏
- 855阅读 · 16点赞 · 4收藏
- 878阅读 · 30点赞 · 18收藏
缤纷浏览器 —— 一键换肤，个性随心换（H5实现浏览器换肤效果）
- 560阅读 · 9点赞 · 5收藏
- 821阅读 · 27点赞 · 23收藏
- 732阅读 · 30点赞 · 25收藏
Node.js快速入门：搭建基础Web服务器与实现CRUD及登录功能
- 906阅读 · 31点赞 · 16收藏
- 745阅读 · 11点赞 · 18收藏
爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析
- 1299阅读 · 25点赞 · 30收藏
- 1082阅读 · 14点赞 · 19收藏
- 1337阅读 · 35点赞 · 9收藏
Vue 3响应式系统详解：ref、toRefs、reactive及更多
- 1193阅读 · 23点赞 · 14收藏
- 1061阅读 · 27点赞 · 28收藏
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
