Web实现名言生成器：JavaScript DOM基础与实例教程

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

🤖 洛可可白：个人主页

🔥 个人专栏：✅前端技术 ✅后端技术

🏠 个人博客：洛可可白博客

🐱 代码获取：bestwishes0203

📷 封面壁纸：洛可可白wallpaper

在这里插入图片描述

文章目录

Web实现名言生成器：JavaScript DOM基础与实例教程
- JavaScript DOM基础
- 实例：名言生成器
- - 实现效果
  - 创建HTML结构
  - 编写JavaScript逻辑
  - - 初始化名言列表
    - 获取随机名言
    - 更新名言显示
  - 样式美化
- 全部代码
- 结语
- 🎉 往期精彩回顾

Web实现名言生成器：JavaScript DOM基础与实例教程

名言生成器是一个简单而有趣的Web应用，它可以随机显示历史上著名人物的名言。通过这个教程，我们将学习如何使用JavaScript DOM API来实现这个功能，并介绍相关的JavaScript DOM基础知识。

JavaScript DOM基础

DOM（Document Object Model）是HTML文档的编程接口，它允许我们通过JavaScript访问和操作网页元素。在JavaScript中，我们可以使用DOM API来获取元素、修改内容、绑定事件等。

实例：名言生成器

实现效果

体验地址：

http://8.210.131.139/QuoteGenerator.html

创建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>