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

前端
字数统计: 1.5k   |   阅读时长≈ 6 分钟

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结构。

1
2
3
4
5
6
<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中，我们首先定义一个包含名言和作者的数组。

1
2
3
4
5
6
7
8
9
10
11
const quotes = [
    {
        quote: "生命不止，奋斗不息。",
        author: "方志敏",
    },
    {
        quote: "知识就是力量。",
        author: "李约瑟",
    },
  // ... 更多名言和作者列表 ...
];

获取随机名言

定义getRandomQuote函数来从名言列表中随机获取一条名言。

1
2
3
4
function getRandomQuote() {
  const index = Math.floor(Math.random() * quotes.length);
  return quotes[index];
}

更新名言显示

定义一个事件监听器，当用户点击“生成名言”按钮时，调用getRandomQuote函数获取新的名言，并更新页面上的内容。

1
2
3
4
5
6
7
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样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* ... 样式代码 ... */
      .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;
      }

全部代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!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操作的基本概念和方法，以及如何在实际项目中应用它们。名言生成器是一个入门级的编程项目，适合初学者练习和提升编程技能。

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2022-2024 何福海
  • 访问人数: | 浏览次数:

请我喝杯奶茶吧~

支付宝
微信