随机名言生成器

学习目标

• 用数组存储多条名言数据
• 用 Math.random 生成随机索引
• 用 DOM 操作更新页面显示
• 理解数组索引和取值操作

前置要求

• 了解 JavaScript 数组基础
• 了解 DOM 操作和事件监听
• 已完成“计数器”项目或具备同等基础

步骤

2. 1

   准备名言数据

   在 JS 中定义一个数组，每个元素是包含 text 和 author 字段的对象。先放五条名言进去。

   代码复制

   const quotes = [
     { text: "千里之行，始于足下。", author: "老子" },
     { text: "不积跬步，无以至千里。", author: "荀子" },
     { text: "学而时习之，不亦说乎。", author: "孔子" },
     { text: "纸上得来终觉浅，绝知此事要躬行。", author: "陆游" },
     { text: "业精于勤，荒于嬉。", author: "韩愈" },
   ];

   预期结果

   quotes 数组包含五条名言对象。

   显示提示
4. 2

   搭建 HTML 结构

   HTML 中放一个显示名言的区块和一个“换一条”按钮。用 blockquote 语义化标签。

   代码复制

   <blockquote id="quote-text">点击下方按钮获取名言</blockquote>
   <p id="quote-author"></p>
   <button id="new-quote">换一条</button>

   预期结果

   页面显示名言占位文本和按钮。

   显示提示
6. 3

   实现随机抽取逻辑

   编写函数：用 Math.random 乘以数组长度生成随机索引，Math.floor 取整，从数组取一条名言，更新 DOM。

   代码复制

   const quoteTextEl = document.querySelector('#quote-text');
   const quoteAuthorEl = document.querySelector('#quote-author');
   const newQuoteBtn = document.querySelector('#new-quote');
   
   function showRandomQuote() {
     const index = Math.floor(Math.random() * quotes.length);
     const quote = quotes[index];
     quoteTextEl.textContent = quote.text;
     quoteAuthorEl.textContent = '—— ' + quote.author;
   }
   
   newQuoteBtn.addEventListener('click', showRandomQuote);
   // 页面加载时先显示一条
   showRandomQuote();

   预期结果

   页面加载即显示一条随机名言，点击按钮换另一条。

   显示提示
8. 4

   避免连续重复

   进阶：记录上一次的索引，如果新抽到的和上次相同就再抽一次。让体验更好。

   代码复制

   let lastIndex = -1;
   
   function showRandomQuote() {
     let index;
     do {
       index = Math.floor(Math.random() * quotes.length);
     } while (index === lastIndex && quotes.length > 1);
     lastIndex = index;
     const quote = quotes[index];
     quoteTextEl.textContent = quote.text;
     quoteAuthorEl.textContent = '—— ' + quote.author;
   }

   预期结果

   连续点击不会出现连续两次相同的名言。

   显示提示

相关资源