iT邦幫忙

2024 iThome 鐵人賽
DAY 21
0
JavaScript

Javascript網頁程式管理系統系列 第 21 篇

day 21 javascript運動app網頁程式管理系統

16th鐵人賽
30 瀏覽

  • 分享至 

  • xImage
    •  

今天是第二十一天我們可以寫一個javascript運動app網頁程式管理系統，由於現在科技日新月異，大家比較少運動，因此我們可以自己寫一個javascript運動app去紀錄自己的運動規律以及路線，因此我可以寫一個app去了解我自己的身體狀態透過javasctipt運動app網頁程式管理系統來達成此目標，以下是我的程式碼

1. HTML (建立網頁結構)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>運動管理系統</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>運動管理系統</h1>
        
        <div class="form-group">
            <label for="exercise-name">運動名稱:</label>
            <input type="text" id="exercise-name" placeholder="輸入運動名稱">
        </div>
        
        <div class="form-group">
            <label for="exercise-duration">運動時間 (分鐘):</label>
            <input type="number" id="exercise-duration" placeholder="輸入運動時間">
        </div>
        
        <button id="add-exercise-btn">新增運動</button>
        
        <h2>運動記錄</h2>
        <ul id="exercise-list"></ul>
    </div>

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

2. CSS (設置樣式)

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    padding: 20px;
}

.container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 0 auto;
}

h1 {
    text-align: center;
    color: #333;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #333;
}

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

h2 {
    margin-top: 30px;
    color: #333;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    background-color: #f8f9fa;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li span {
    font-size: 16px;
    color: #333;
}

li button {
    background-color: #dc3545;
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

li button:hover {
    background-color: #c82333;
}

3. JavaScript (處理邏輯)

// 獲取表單元素
const exerciseNameInput = document.getElementById('exercise-name');
const exerciseDurationInput = document.getElementById('exercise-duration');
const addExerciseButton = document.getElementById('add-exercise-btn');
const exerciseList = document.getElementById('exercise-list');

// 儲存運動記錄
let exercises = [];

// 新增運動
addExerciseButton.addEventListener('click', () => {
    const name = exerciseNameInput.value.trim();
    const duration = exerciseDurationInput.value.trim();

    if (name && duration && !isNaN(duration)) {
        const exercise = {
            name,
            duration: parseInt(duration, 10)
        };
        exercises.push(exercise);
        renderExerciseList();
        clearInputs();
    } else {
        alert('請正確輸入運動名稱和時間');
    }
});

// 渲染運動列表
function renderExerciseList() {
    exerciseList.innerHTML = '';
    exercises.forEach((exercise, index) => {
        const listItem = document.createElement('li');
        listItem.innerHTML = `
            <span>${exercise.name} - ${exercise.duration} 分鐘</span>
            <button onclick="deleteExercise(${index})">刪除</button>
        `;
        exerciseList.appendChild(listItem);
    });
}

// 刪除運動
function deleteExercise(index) {
    exercises.splice(index, 1);
    renderExerciseList();
}

// 清除輸入欄位
function clearInputs() {
    exerciseNameInput.value = '';
    exerciseDurationInput.value = '';
}

4. 功能介紹

  • 新增運動記錄：使用者輸入運動名稱及運動時間，點擊「新增運動」按鈕將資料新增到運動記錄中。
  • 查看運動記錄：所有新增的運動將顯示在下方列表，包含名稱及運動時間。
  • 刪除運動記錄：每個運動記錄旁都有一個刪除按鈕，點擊後該運動會從列表中刪除。

這個系統可以進一步擴展，例如：

  • 加入時間戳來紀錄運動時間。
  • 計算運動總時長。
  • 將資料儲存在本地存儲（localStorage），以便重新載入網頁時保存記錄。

我會以解釋javascript程式碼部分為主

1. 變數宣告與元素獲取

const exerciseNameInput = document.getElementById('exercise-name');
const exerciseDurationInput = document.getElementById('exercise-duration');
const addExerciseButton = document.getElementById('add-exercise-btn');
const exerciseList = document.getElementById('exercise-list');

這段程式使用 document.getElementById 來獲取 HTML 中的 DOM 元素。這些元素與表單中的輸入欄位和按鈕相關聯：

  • exerciseNameInput: 用來獲取使用者輸入的運動名稱。
  • exerciseDurationInput: 用來獲取使用者輸入的運動時間（分鐘）。
  • addExerciseButton: 新增運動的按鈕。
  • exerciseList: 用來顯示運動記錄的 <ul> 列表。

2. 儲存運動記錄的數組

let exercises = [];
  • exercises 是一個空陣列，用來儲存所有的運動記錄。每次新增一個運動，它會被加到這個陣列中，這樣你可以跟踪所有的運動。

3. 新增運動功能

addExerciseButton.addEventListener('click', () => {
    const name = exerciseNameInput.value.trim();
    const duration = exerciseDurationInput.value.trim();

    if (name && duration && !isNaN(duration)) {
        const exercise = {
            name,
            duration: parseInt(duration, 10)
        };
        exercises.push(exercise);
        renderExerciseList();
        clearInputs();
    } else {
        alert('請正確輸入運動名稱和時間');
    }
});

這段程式的作用是監聽「新增運動」按鈕的點擊事件，並根據使用者的輸入來新增運動記錄：

  1. 監聽事件：addExerciseButton.addEventListener('click', ...) 會在按鈕被點擊時執行內部的函數。

  2. 取得輸入值：

    • name = exerciseNameInput.value.trim(); 取得使用者輸入的運動名稱，trim() 刪除頭尾的空白字符。
    • duration = exerciseDurationInput.value.trim(); 取得使用者輸入的運動時間（分鐘），也使用 trim() 刪除空白。

  3. 檢查有效性：

    • 檢查 name 和 duration 是否存在且 duration 是數字（用 !isNaN(duration) 來確認是否是有效的數字）。
    • 如果有效，則建立一個新的運動物件 { name, duration: parseInt(duration, 10) }。parseInt(duration, 10) 會把時間轉換成數字格式。

  4. 新增運動：使用 exercises.push(exercise); 把新的運動記錄加到 exercises 陣列中。

  5. 渲染列表：呼叫 renderExerciseList() 更新運動列表，顯示在網頁上。

  6. 清除輸入：呼叫 clearInputs() 清空輸入框，讓使用者可以輸入下一個運動。

  7. 錯誤處理：如果輸入無效，會顯示警告訊息 alert('請正確輸入運動名稱和時間');。

4. 渲染運動列表

function renderExerciseList() {
    exerciseList.innerHTML = '';
    exercises.forEach((exercise, index) => {
        const listItem = document.createElement('li');
        listItem.innerHTML = `
            <span>${exercise.name} - ${exercise.duration} 分鐘</span>
            <button onclick="deleteExercise(${index})">刪除</button>
        `;
        exerciseList.appendChild(listItem);
    });
}

這個函數負責將 exercises 陣列中的每個運動記錄顯示在網頁上：

  1. 清空列表：exerciseList.innerHTML = ''; 清空 <ul> 內的所有子元素，以避免每次新增運動時重複顯示舊的記錄。

  2. 迭代運動記錄：exercises.forEach((exercise, index) => { ... }) 會遍歷 exercises 陣列中的每個項目，並根據運動名稱和運動時間建立一個新的列表項目 <li>。

  3. 新增列表項目：使用 document.createElement('li') 建立新的 <li> 元素，並為每個運動新增一個按鈕。

  4. 按鈕功能：每個運動記錄的 <li> 內都有一個刪除按鈕，該按鈕會調用 deleteExercise(index) 函數來刪除對應的運動記錄。

  5. 加入列表：exerciseList.appendChild(listItem); 將新建立的 <li> 元素加到運動列表 (<ul>) 中。

5. 刪除運動

function deleteExercise(index) {
    exercises.splice(index, 1);
    renderExerciseList();
}
  • 刪除記錄：exercises.splice(index, 1); 會刪除 exercises 陣列中的一個項目，splice 函數從陣列的 index 位置刪除 1 個元素。
  • 更新列表：呼叫 renderExerciseList() 重新渲染運動列表，以便刪除後的運動記錄馬上反映在網頁上。

6. 清除輸入框

function clearInputs() {
    exerciseNameInput.value = '';
    exerciseDurationInput.value = '';
}
  • 清空輸入欄位：這個函數會把 exerciseNameInput 和 exerciseDurationInput 的值設為空字串，讓使用者可以快速重新輸入新的運動記錄。

總結

這段 JavaScript 程式主要透過：

  • 監聽按鈕點擊事件，將使用者輸入的運動記錄保存到 exercises 陣列中。
  • 動態更新列表 來顯示每個運動項目，並提供刪除功能。

上一篇
day 20 javascript資訊盤點網頁程式管理系統
下一篇
day 22 javascript線上影片教學平台網頁程式管理系統
系列文
Javascript網頁程式管理系統 共 25 篇
  1. 21
    day 21 javascript運動app網頁程式管理系統
  2. 22
    day 22 javascript線上影片教學平台網頁程式管理系統
  3. 23
    day 23 javascript結合line bot天氣管理規劃行程網頁程式管理系統
  4. 24
    day 24 javascript自動整理筆記網頁程式管理系統
  5. 25
    day 25 javascript連結github程式碼網頁程式管理系統
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1047 組
團體組數
40 組
累計文章數
13099 篇
最後報名日
9/15
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 16th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react 資訊安全
熱門問題
熱門回答
熱門文章
IT邦幫忙