颜色切换器

学习目标

• 用 Math.random 生成随机 RGB 值
• 把 RGB 转换为十六进制颜色字符串
• 用 element.style 修改元素样式
• 理解事件驱动和样式操作

前置要求

• 了解 JavaScript 基础语法
• 了解 DOM 操作
• 已完成“计数器”项目或具备同等基础

步骤

2. 1

   搭建 HTML 结构

   HTML 中放一个“换颜色”按钮和一个显示当前颜色值的 span。

   代码复制

   <button id="change-color">换颜色</button>
   <p>当前颜色：<span id="color-value">#ffffff</span></p>

   预期结果

   页面显示按钮和颜色值文本。

   显示提示
4. 2

   生成随机十六进制颜色

   编写函数生成随机颜色：用 Math.random 生成 0 到 16777215（0xffffff）的整数，转成十六进制字符串，前面加 #。

   代码复制

   function randomColor() {
     const num = Math.floor(Math.random() * 0xffffff);
     return '#' + num.toString(16).padStart(6, '0');
   }

   预期结果

   调用 randomColor() 返回类似 #3a2bf1 的六位十六进制颜色。

   显示提示
6. 3

   绑定按钮事件切换背景

   获取按钮和颜色值元素，给按钮绑定 click 事件：调用 randomColor 生成新颜色，设置 body 背景色，更新 span 显示。

   代码复制

   const btn = document.querySelector('#change-color');
   const colorValueEl = document.querySelector('#color-value');
   
   btn.addEventListener('click', () => {
     const color = randomColor();
     document.body.style.backgroundColor = color;
     colorValueEl.textContent = color;
   });

   预期结果

   点击按钮背景色随机变化，颜色值同步更新。

   显示提示
8. 4

   优化：避免连续相同颜色

   记录上一次的颜色，如果新生成的和上次相同就再生成一次。避免点击后“没变化”的体验。

   代码复制

   let lastColor = '#ffffff';
   
   btn.addEventListener('click', () => {
     let color;
     do {
       color = randomColor();
     } while (color === lastColor);
     lastColor = color;
     document.body.style.backgroundColor = color;
     colorValueEl.textContent = color;
   });

   预期结果

   每次点击背景色都会变化，不会连续两次相同。

   显示提示

相关资源