【前端小練習】 點擊按鈕即可產生「隨機背景色」！零基礎也能輕鬆上手

練習目標

這篇是我的前端練習記錄，透過 CodePen 製作一個小功能：「點一下按鈕，就讓整個畫面換個背景色」。

• 按鈕怎麼綁定事件
• JavaScript 怎麼控制畫面樣式
• 如何產生隨機顏色

練習畫面預覽

HTML 程式碼

HTML 很簡單，我們只需要一個按鈕：

<button onclick="changeColor()">點我改變背景色</button>

這裡我們用 onclick 綁定了一個函式叫 changeColor()。

CSS 程式碼

我們來美化一下畫面，讓它居中並加點空間：

body {
  transition: background-color 0.3s ease;
  text-align: center;
  padding: 100px;
  font-family: sans-serif;
}

button {
  font-size: 18px;
  padding: 10px 20px;
  cursor: pointer;
}

transition 是關鍵，它讓背景色變換時有滑順的效果。

JavaScript 程式碼

JavaScript 的重點在這段：

function changeColor() {
  const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  document.body.style.backgroundColor = randomColor;
}

說明一下：

• Math.random()：會產生 0 到 1 之間的隨機小數
• 16777215 是 24 位元顏色的最大值（即 #FFFFFF）
• .toString(16) 把數字轉成十六進位
• document.body.style.backgroundColor 是關鍵，它改變了整個頁面的背景顏色！

學習重點整理

onclick -> 綁定按鈕點擊事件

Math.random() -> 產生隨機數

.toString(16) -> 數字轉成十六進位（HEX 顏色）

style.backgroundColor -> 透過 JavaScript 改變畫面樣式

transition -> CSS 動畫效果，讓畫面變得滑順