日本动漫.js - Html

日本动漫作为一种特殊的文化形式，已经深深地影响了世界的各个角落。作为程序员，我们也可以利用 HTML 和 JavaScript 等技术来展示和传播这种文化。

目录

• 准备工作
• 展示动漫角色列表
• 实现简单的搜索功能

准备工作

在开始之前，我们需要准备一些素材，比如图片和文字等。这里我们以海贼王为例，准备了一个角色列表，每个角色都有自己的头像和介绍。

展示动漫角色列表

接下来，我们需要在 HTML 中定义一个容器，用来展示角色列表。我们使用 div 标签来定义这个容器，并设置一个 ID。

<div id="character-list"></div>

然后，我们在 JavaScript 中获取这个 ID，并向其中添加角色。

const CHARACTER_LIST = [
  { name: 'Monkey D. Luffy', avatar: 'luffy.png', intro: 'The captain of the Straw Hat Pirates.' },
  { name: 'Roronoa Zoro', avatar: 'zoro.png', intro: 'The swordsman of the Straw Hat Pirates.' },
  { name: 'Nami', avatar: 'nami.png', intro: 'The navigator of the Straw Hat Pirates.' },
  { name: 'Usopp', avatar: 'usopp.png', intro: 'The sniper of the Straw Hat Pirates.' },
  { name: 'Sanji', avatar: 'sanji.png', intro: 'The cook of the Straw Hat Pirates.' },
  { name: 'Tony Tony Chopper', avatar: 'chopper.png', intro: 'The doctor of the Straw Hat Pirates.' },
  { name: 'Nico Robin', avatar: 'robin.png', intro: 'The archaeologist of the Straw Hat Pirates.' },
  { name: 'Franky', avatar: 'franky.png', intro: 'The shipwright of the Straw Hat Pirates.' },
  { name: 'Brook', avatar: 'brook.png', intro: 'The musician of the Straw Hat Pirates.' }
];

const characterListEl = document.querySelector('#character-list');

CHARACTER_LIST.forEach(character => {
  const characterEl = document.createElement('div');
  characterEl.classList.add('character');
  characterEl.innerHTML = `
    <img class="avatar" src="${character.avatar}" alt="${character.name}">
    <div class="name">${character.name}</div>
    <div class="intro">${character.intro}</div>
  `;
  characterListEl.appendChild(characterEl);
});

这段代码中，我们使用了 JavaScript 来动态生成 HTML 元素，并将它们添加到容器中。每个角色都使用一个 div 标签来表示，其中包含了头像、名字和介绍等元素。通过设置 CSS，我们可以使这些元素排列得更美观。

最后，我们需要添加一些 CSS 样式，来让角色列表看起来更漂亮。

.character {
  display: flex;
  align-items: center;
  padding: 10px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.name {
  font-size: 24px;
  margin-left: 20px;
}

.intro {
  margin-left: 20px;
  color: #999;
}

实现简单的搜索功能

接下来，我们可以为角色列表添加一些交互功能，比如搜索。我们可以使用输入框来让用户输入搜索关键字，然后使用 JavaScript 来根据关键字过滤角色列表。

首先，我们需要在 HTML 中添加一个搜索框。

<input id="search-input" type="text" placeholder="Search character...">

然后，我们在 JavaScript 中获取这个输入框，并添加一个事件监听器，当用户输入关键字时，我们会根据这个关键字来过滤角色列表。

const searchInputEl = document.querySelector('#search-input');

searchInputEl.addEventListener('input', e => {
  const keyword = e.target.value.trim().toLowerCase();

  CHARACTER_LIST.forEach(character => {
    const characterEl = characterListEl.querySelector(`[alt="${character.name}"]`).parentNode;
    if (character.name.toLowerCase().includes(keyword)) {
      characterEl.classList.remove('hidden');
    } else {
      characterEl.classList.add('hidden');
    }
  });
});

这段代码中，我们使用 addEventListener 函数来监听输入框的 input 事件，当用户输入关键字时，e.target.value 会返回输入框中的内容。

然后，我们对所有角色进行循环遍历，将每个角色的名字转换为小写，并使用 includes 函数来判断当前角色是否包含这个关键字。如果包含，我们就移除 hidden class，让角色显示出来。如果不包含，我们就添加一个 hidden class，让角色隐藏。

最后，我们需要添加一些 CSS 样式，来让隐藏的角色不再占用空间。

.hidden {
  display: none !important;
}

总结

到此为止，我们已经成功地展示了一个动漫角色列表，并添加了搜索功能。在实际项目中，我们可以使用类似的方法来展示各种不同的动漫资源，比如角色、场景、剧情等，让程序更加生动有趣。