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

html收藏网站代码

“`html，复制

HTML收藏网站代码详解

基础结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">网站收藏夹</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            padding: 10px;
            margin: 5px 0;
            background: #f5f5f5;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .icon {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        .add-btn {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>我的收藏网站</h1>
    <ul id="bookmark-list">
        <!-收藏项将动态生成 -->
    </ul>
    <div class="add-btn" onclick="showAddForm()">+ 添加网站</div>
    <!-添加网站表单（默认隐藏） -->
    <div id="add-form" style="display: none;">
        <input type="text" id="site-name" placeholder="网站名称">
        <input type="text" id="site-url" placeholder="网站地址">
        <button onclick="addBookmark()">保存</button>
        <button onclick="hideAddForm()">取消</button>
    </div>
    <script>
        // 初始化数据
        let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
        // 渲染收藏列表
        function renderList() {
            const list = document.getElementById('bookmark-list');
            list.innerHTML = '';
            bookmarks.forEach((item, index) => {
                const li = document.createElement('li');
                li.innerHTML = `
                    <span>${item.name}</span>
                    <a href="${item.url}" target="_blank"></a>
                    <img src="delete.png" class="icon" onclick="deleteBookmark(${index})">
                `;
                list.appendChild(li);
            });
        }
        // 显示添加表单
        function showAddForm() {
            document.getElementById('add-form').style.display = 'block';
        }
        // 隐藏添加表单
        function hideAddForm() {
            document.getElementById('add-form').style.display = 'none';
        }
        // 添加收藏项
        function addBookmark() {
            const name = document.getElementById('site-name').value.trim();
            const url = document.getElementById('site-url').value.trim();
            if (name && url) {
                bookmarks.push({ name, url });
                localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
                renderList();
                hideAddForm();
            } else {
                alert('请填写完整信息');
            }
        }
        // 删除收藏项
        function deleteBookmark(index) {
            bookmarks.splice(index, 1);
            localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
            renderList();
        }
        // 初始化渲染
        renderList();
    </script>
</body>
</html>

核心功能说明表

功能模块 实现方式
数据存储 使用 localStorage 保存收藏数据，页面刷新后自动加载
动态渲染列表 JavaScript 遍历数组生成 <li> 元素，支持名称、跳转链接和删除按钮
添加收藏项 通过隐藏表单收集用户输入，验证后更新数组并重新渲染
删除收藏项 根据索引删除数组中的对象，同步更新本地存储和页面显示
图标化交互 用图片/emoji替代传统链接，提升视觉效果

样式定制建议

  1. 主题配色：修改 body 背景色和按钮颜色（如 #4CAF50 可替换为其他色值）
  2. 布局调整：修改 max-width 或 padding 适应不同屏幕尺寸
  3. 图标优化：替换 delete.png 为字体图标（如 Font Awesome）减少图片依赖
  4. 动画效果：给 li 添加 transition 实现删除/添加时的平滑过渡

常见问题与解答

问题1：如何修改收藏项的排序方式？
解答：在 renderList 函数中，可对 bookmarks 数组进行排序（如按字母顺序）：

html收藏网站代码 第1张

bookmarks.sort((a, b) => a.name.localeCompare(b.name));

将这段代码放在 renderList 开头即可按名称排序。

问题2：能否直接打开链接在新标签页？
解答：将 <a> 标签的 target 属性改为 _blank： 

<a href="${item.url}" target="_blank"></a>

这样点击地球图标时

0

相关文章