我的动漫列表 - JavaScript

简介

这是一个使用 JavaScript 实现的动漫列表管理应用程序。本应用程序可使用户轻松添加、编辑和删除动漫列表中的项目。

主要功能

1. 添加动漫 - 用户可以输入动漫的名称、类型和描述，然后将其添加到列表中。
2. 编辑动漫 - 用户可以编辑已添加到列表中的动漫的名称、类型和描述。
3. 删除动漫 - 用户可以删除列表中任何一个动漫。
4. 展示动漫列表 - 用户可以查看动漫列表的详细信息。

技术

本应用程序使用以下技术：

• HTML - 前端开发语言，用于构建页面。
• CSS - 前端样式表语言，用于美化页面。
• JavaScript - 前端开发语言，用于实现应用程序逻辑。
• LocalStorage - Web 存储 API，用于在客户端存储和检索数据。

实现

以下是我们用于实现的 JavaScript 代码示例：

// 获取动漫列表和用户输入的值
const animeList = JSON.parse(localStorage.getItem('animeList')) || [];
const nameInput = document.getElementById('name');
const typeInput = document.getElementById('type');
const descriptionInput = document.getElementById('description');

// 添加动漫
function addAnime(event) {
  event.preventDefault();
  const name = nameInput.value;
  const type = typeInput.value;
  const description = descriptionInput.value;
  const anime = {
    name,
    type,
    description
  };
  animeList.push(anime);
  localStorage.setItem('animeList', JSON.stringify(animeList));
  displayAnimeList();
  nameInput.value = '';
  typeInput.value = '';
  descriptionInput.value = '';
}

// 编辑动漫
function editAnime(index) {
  const anime = animeList[index];
  nameInput.value = anime.name;
  typeInput.value = anime.type;
  descriptionInput.value = anime.description;
  animeList.splice(index, 1);
  localStorage.setItem('animeList', JSON.stringify(animeList));
  displayAnimeList();
}

// 删除动漫
function deleteAnime(index) {
  animeList.splice(index, 1);
  localStorage.setItem('animeList', JSON.stringify(animeList));
  displayAnimeList();
}

// 展示动漫列表
function displayAnimeList() {
  const list = document.getElementById('anime-list');
  list.innerHTML = '';
  animeList.forEach((anime, index) => {
    const listItem = document.createElement('li');
    const actions = document.createElement('div');
    actions.innerHTML = `<button class="edit" onClick="editAnime(${index})">Edit</button><button class="delete" onClick="deleteAnime(${index})">Delete</button>`;
    listItem.innerHTML = `<h3>${anime.name}</h3><p>${anime.type}</p><p>${anime.description}</p>`;
    listItem.appendChild(actions);
    list.appendChild(listItem);
  });
}

displayAnimeList();

总结

这是一个简单而实用的动漫列表管理程序，使用 JavaScript 技术实现。通过使用本应用程序，用户可以轻松添加、编辑和删除他们的动漫列表中的项目。