xiaohelikesleep · blog

Appearance

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

创建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中，我们首先定义一个包含名言和作者的数组。

javascript
const quotes = [
    {
        quote: "生命不止，奋斗不息。",
        author: "方志敏",
    },
    {
        quote: "知识就是力量。",
        author: "李约瑟",
    },
  // ... 更多名言和作者列表 ...
];

获取随机名言 ​

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

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

更新名言显示 ​

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

javascript
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样式。

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;
      }

全部代码 ​

html
<!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>