練習目標
這篇是我的前端練習記錄，透過 CodePen 製作一個小功能：「點一下按鈕，就讓整個畫面換個背景色」。
這個練習適合剛開始學習 HTML、CSS、JavaScript 的人，幫助理解：- 按鈕怎麼綁定事件
- 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 動畫效果，讓畫面變得滑順
