編寫一個簡單的互動式網頁應用程式

2024 iThome 鐵人賽

DAY 26

JavaScript

JavaScript 基礎：端開發的第一步系列第 26 篇

16th鐵人賽

ahpao

2024-10-10 17:47:29

104 瀏覽

分享至

第二十六天：編寫一個簡單的互動式網頁應用程式

編寫一個簡單的互動式網頁應用程式，讓使用者可以與頁面進行互動。內容包括事件處理、DOM 操作、條件語句、函數等功能來構建一個動態的應用。

應用程式描述

我們將編寫一個簡單的「數字增減器」應用程式。這個應用允許使用者點擊按鈕來增加或減少頁面上的數字，並且當數字達到某個特定範圍時，會顯示不同的提示訊息。

功能要求：

顯示一個數字：頁面上顯示初始數字 0。
增加數字：當使用者點擊「增加」按鈕時，數字增加 1。
減少數字：當使用者點擊「減少」按鈕時，數字減少 1。
範圍控制：當數字超過 100，顯示「數字太大了！」；當數字小於 -10，顯示「數字太小了！」。
重置功能：提供一個重置按鈕，將數字歸零。

開發步驟

1. HTML 結構

首先，我們創建一個基本的 HTML 框架，包含數字顯示區域和幾個按鈕：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>互動式數字增減器</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 50px;
    }
    #number {
      font-size: 2rem;
      margin-bottom: 20px;
    }
    button {
      padding: 10px 20px;
      margin: 5px;
      font-size: 1rem;
    }
  </style>
</head>
<body>

  <h1>數字增減器</h1>

  <div id="number">0</div>

  <button id="increaseBtn">增加</button>
  <button id="decreaseBtn">減少</button>
  <button id="resetBtn">重置</button>

  <div id="message"></div>

  <script src="app.js"></script>
</body>
</html>

2. JavaScript 邏輯 (app.js)

接下來，我們撰寫 JavaScript 來實現數字的增減和提示訊息的顯示。

let numberDisplay = document.getElementById('number');
let messageDisplay = document.getElementById('message');
let number = 0;

document.getElementById('increaseBtn').addEventListener('click', () => {
  number++;
  updateDisplay();
});

document.getElementById('decreaseBtn').addEventListener('click', () => {
  number--;
  updateDisplay();
});

document.getElementById('resetBtn').addEventListener('click', () => {
  number = 0;
  updateDisplay();
});

function updateDisplay() {
  numberDisplay.textContent = number;
  messageDisplay.textContent = ''; // 清除之前的提示訊息

  if (number > 100) {
    messageDisplay.textContent = '數字太大了！';
  } else if (number < -10) {
    messageDisplay.textContent = '數字太小了！';
  }
}

功能解析：

數字顯示：使用 numberDisplay.textContent = number; 動態更新頁面上的數字。
按鈕事件處理：
- increaseBtn 用來增加數字，decreaseBtn 用來減少數字。
- 每次按下按鈕後，觸發 updateDisplay() 函數來更新畫面。
提示訊息：根據數字的大小，在 messageDisplay 中顯示相應的提示訊息。
重置功能：resetBtn 將數字歸零，並重新更新畫面。