当前位置：首页 > 行业动态 > 正文

html收藏网站代码生成

收藏本站

功能需求分析

通过HTML+CSS+JavaScript实现一个简单的收藏网站页面，支持以下功能：

  • 添加网站：输入名称和URL后保存
  • 删除网站：点击删除按钮移除条目
  • 本地存储：数据持久化存储在localStorage
  • 动态渲染：页面加载时自动读取并展示已收藏网站

代码结构说明

模块 技术实现 功能描述
HTML结构 <div>容器 + 表单 + 列表 基础页面框架
CSS样式 Flex布局 + 基础美化 布局排版和视觉优化
JavaScript DOM操作 + 事件监听 实现交互逻辑

核心代码讲解

HTML主体结构

<div class="container">
  <h2>我的收藏夹</h2>
  <!-添加网站表单 -->
  <form id="addForm">
    <input type="text" id="siteName" placeholder="网站名称" required>
    <input type="url" id="siteUrl" placeholder="http://" required>
    <button type="submit">添加</button>
  </form>
  <!-网站列表 -->
  <ul id="siteList"></ul>
</div>

CSS样式定义

body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  margin: 0;
  padding: 20px;
}
.container {
  max-width: 600px;
  margin: auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
}
form {
  display: flex;
  margin-bottom: 20px;
}
input[type="text"], input[type="url"] {
  flex: 1;
  padding: 8px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 8px 16px;
  color: white;
  background: #007BFF;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.delete-btn {
  background: #DC3545;
  padding: 4px 8px;
  border-radius: 4px;
}

JavaScript交互逻辑

// 读取本地存储数据
function loadWebsites() {
  const websites = JSON.parse(localStorage.getItem('favoriteSites')) || [];
  renderWebsites(websites);
}
// 渲染网站列表
function renderWebsites(sites) {
  const list = document.getElementById('siteList');
  list.innerHTML = ''; // 清空现有列表
  sites.forEach((site, index) => {
    const li = document.createElement('li');
    li.innerHTML = `
      <span><a href="${site.url}" target="_blank">${site.name}</a></span>
      <button class="delete-btn" data-index="${index}">删除</button>
    `;
    list.appendChild(li);
  });
}
// 添加网站事件处理
document.getElementById('addForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const name = document.getElementById('siteName').value;
  const url = document.getElementById('siteUrl').value;
  const websites = JSON.parse(localStorage.getItem('favoriteSites')) || [];
  websites.push({ name, url });
  localStorage.setItem('favoriteSites', JSON.stringify(websites));
  renderWebsites(websites);
  this.reset(); // 清空表单
});
// 删除网站事件委托
document.getElementById('siteList').addEventListener('click', function(e) {
  if (e.target.classList.contains('delete-btn')) {
    const index = e.target.getAttribute('data-index');
    const websites = JSON.parse(localStorage.getItem('favoriteSites')) || [];
    websites.splice(index, 1);
    localStorage.setItem('favoriteSites', JSON.stringify(websites));
    renderWebsites(websites);
  }
});
// 初始化加载数据
loadWebsites();

完整代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">网站收藏夹</title>
  <style>
    / 此处粘贴上述CSS代码 /
  </style>
</head>
<body>
  <div class="container">
    <h2>我的收藏夹</h2>
    <form id="addForm">
      <input type="text" id="siteName" placeholder="网站名称" required>
      <input type="url" id="siteUrl" placeholder="http://" required>
      <button type="submit">添加</button>
    </form>
    <ul id="siteList"></ul>
  </div>
  <script>
    / 此处粘贴上述JavaScript代码 /
  </script>
</body>
</html>

相关问题与解答

Q1：如何修改网站列表的展示样式？

A1：可以通过修改CSS变量调整布局，

:root {
  --item-bg: #f9f9f9;
  --item-hover-bg: #e0e0e0;
}
li:hover {
  background: var(--item-hover-bg);
}

通过修改--item-bg和--item-hover-bg的值，可快速调整列表项背景色。

Q2：如何给网站添加分类标签？

A2：需扩展数据结构和UI：

  1. 在websites对象中添加category字段： 
    websites.push({ name, url, category: '默认分类' });```
  2. 添加分类选择器： 
    <select id="siteCategory">
  <option>默认分类</option>
  <option>技术</option>
  <option>娱乐</option>
</select>```
  3. 修改渲染逻辑,按分类
HTML收藏网站
0

相关文章