今天是第二十二天我們可以寫一個javascript線上影片教學平台網頁程式管理系統，以下是我的程式碼
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>線上影片教學平台管理系統</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1 class="my-4 text-center">影片教學平台管理系統</h1>
<!-- 影片上傳區 -->
<div class="card mb-4">
<div class="card-header">上傳影片</div>
<div class="card-body">
<form id="uploadForm">
<div class="mb-3">
<label for="videoTitle" class="form-label">影片標題</label>
<input type="text" id="videoTitle" class="form-control" required>
</div>
<div class="mb-3">
<label for="videoFile" class="form-label">選擇影片檔案</label>
<input type="file" id="videoFile" class="form-control" accept="video/*" required>
</div>
<button type="submit" class="btn btn-primary">上傳</button>
</form>
</div>
</div>
<!-- 影片列表區 -->
<div class="card">
<div class="card-header">已上傳影片</div>
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th>影片標題</th>
<th>操作</th>
</tr>
</thead>
<tbody id="videoList"></tbody>
</table>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="app.js"></script>
</body>
</html>
body {
background-color: #f8f9fa;
}
h1 {
color: #343a40;
}
.card-header {
background-color: #007bff;
color: white;
}
.btn-primary {
background-color: #007bff;
border: none;
}
// 影片資料
let videos = [];
// 初始化影片列表
function renderVideoList() {
const videoList = document.getElementById('videoList');
videoList.innerHTML = '';
if (videos.length === 0) {
videoList.innerHTML = '<tr><td colspan="2">目前沒有影片。</td></tr>';
return;
}
videos.forEach((video, index) => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${video.title}</td>
<td>
<button class="btn btn-warning btn-sm" onclick="editVideo(${index})">編輯</button>
<button class="btn btn-danger btn-sm" onclick="deleteVideo(${index})">刪除</button>
</td>
`;
videoList.appendChild(row);
});
}
// 上傳影片
document.getElementById('uploadForm').addEventListener('submit', function(event) {
event.preventDefault();
const title = document.getElementById('videoTitle').value;
const file = document.getElementById('videoFile').files[0];
if (!file) {
alert('請選擇影片檔案。');
return;
}
const video = {
title: title,
file: file
};
videos.push(video);
renderVideoList();
this.reset(); // 重置表單
});
// 編輯影片
function editVideo(index) {
const newTitle = prompt('請輸入新的影片標題', videos[index].title);
if (newTitle !== null && newTitle.trim() !== '') {
videos[index].title = newTitle;
renderVideoList();
}
}
// 刪除影片
function deleteVideo(index) {
if (confirm('確定要刪除此影片嗎？')) {
videos.splice(index, 1);
renderVideoList();
}
}
// 初始化頁面時渲染影片列表
renderVideoList();
我會以解釋javascript為主要的程式碼解說
let videos = [];
這是一個用來儲存所有影片資料的空陣列，每個影片物件包含 title 和 file 屬性。在影片上傳時，我們會將影片的資訊加入這個陣列中，並在需要的時候更新或刪除。
renderVideoListfunction renderVideoList() {
const videoList = document.getElementById('videoList');
videoList.innerHTML = ''; // 清空列表，避免重複渲染
if (videos.length === 0) {
videoList.innerHTML = '<tr><td colspan="2">目前沒有影片。</td></tr>';
return; // 如果沒有影片，顯示 "目前沒有影片"
}
videos.forEach((video, index) => {
const row = document.createElement('tr'); // 創建一個表格行
row.innerHTML = `
<td>${video.title}</td>
<td>
<button class="btn btn-warning btn-sm" onclick="editVideo(${index})">編輯</button>
<button class="btn btn-danger btn-sm" onclick="deleteVideo(${index})">刪除</button>
</td>
`;
videoList.appendChild(row); // 將每個影片資料添加到表格中
});
}
videoList.innerHTML = '';：每次重新渲染影片列表前，先清空 videoList 內的內容，確保列表不會重複顯示。videos 陣列為空，則顯示「目前沒有影片」的提示，並終止渲染流程。forEach 遍歷：當有影片時，遍歷 videos 陣列，對每個影片創建一個 <tr>（表格列），並動態插入影片標題與操作按鈕（編輯與刪除）。uploadFormdocument.getElementById('uploadForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單預設的提交行為（避免頁面重新載入）
const title = document.getElementById('videoTitle').value; // 取得影片標題
const file = document.getElementById('videoFile').files[0]; // 取得上傳的影片檔案
if (!file) {
alert('請選擇影片檔案。');
return; // 如果沒有選擇檔案，提示並結束函數
}
const video = {
title: title,
file: file // 將影片標題和檔案保存為一個物件
};
videos.push(video); // 將新影片資料推入 videos 陣列中
renderVideoList(); // 重新渲染影片列表
this.reset(); // 重置表單內容
});
event.preventDefault()：阻止表單提交的預設行為，這樣表單提交後不會刷新頁面。document.getElementById('videoTitle').value 取得影片標題。document.getElementById('videoFile').files[0] 取得選擇的影片檔案。videos 陣列。renderVideoList() 來更新 UI。this.reset()：重置表單，清空所有欄位。editVideofunction editVideo(index) {
const newTitle = prompt('請輸入新的影片標題', videos[index].title); // 使用者輸入新標題
if (newTitle !== null && newTitle.trim() !== '') { // 確保新標題有效
videos[index].title = newTitle; // 更新影片標題
renderVideoList(); // 重新渲染影片列表
}
}
prompt()：彈出一個對話框，讓使用者輸入新的影片標題。初始值為當前影片的標題。null，則更新影片標題。videos 陣列中的標題後，重新渲染影片列表。deleteVideofunction deleteVideo(index) {
if (confirm('確定要刪除此影片嗎？')) { // 彈出確認對話框
videos.splice(index, 1); // 從陣列中刪除該影片
renderVideoList(); // 重新渲染影片列表
}
}
confirm()：彈出確認對話框，詢問使用者是否確定刪除影片。如果使用者點擊「確認」，則繼續執行刪除操作。videos.splice(index, 1)：從 videos 陣列中移除指定索引的影片。splice() 是一個用來移除陣列中元素的方法，第一個參數是起始位置，第二個參數是刪除的數量（1 表示刪除一個元素）。renderVideoList();
這行代碼在頁面載入時即被執行，確保影片列表一開始就正確顯示，即使當前 videos 陣列是空的也能顯示提示「目前沒有影片」。
videos 陣列 是這個系統的核心，負責儲存所有上傳的影片資料。renderVideoList 函數會根據 videos 陣列中的內容動態生成影片列表，並在影片更新、刪除或修改後重新渲染頁面。這個 JavaScript 部分簡單明瞭，主要是透過操作 DOM 和處理事件來達成影片管理功能。
iThome鐵人賽
看影片追技術