网页收藏夹：使用HTML创建简单书签管理工具
<!DOCTYPE html>
<html>
<head>
<title>网页收藏夹</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
color: #4d4d4d;
}
.container {
margin: 50px auto;
width: 600px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
form {
margin-top: 20px;
}
label {
display: block;
margin-bottom: 5px;
color: #4d4d4d;
}
input[type='text'], textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 20px;
box-sizing: border-box;
resize: none;
}
input[type='submit'] {
background-color: #4d4d4d;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
ul {
margin-top: 20px;
padding: 0;
list-style: none;
}
li {
border-bottom: 1px solid #ccc;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
li:last-child {
border-bottom: none;
}
li a {
color: #4d4d4d;
text-decoration: none;
}
li a:hover {
text-decoration: underline;
}
li button {
background-color: #f44336;
color: #fff;
border: none;
border-radius: 3px;
padding: 10px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>网页收藏夹</h1>
<div class='container'>
<form>
<label for='title'>网页标题</label>
<input type='text' id='title' name='title' placeholder='请输入网页标题'>
<label for='url'>网页链接</label>
<input type='text' id='url' name='url' placeholder='请输入网页链接'>
<label for='description'>网页描述</label>
<textarea id='description' name='description' rows='5' placeholder='请输入网页描述'></textarea>
<input type='submit' value='添加'>
</form>
<ul id='bookmarks'>
<!-- 这里会动态添加书签 -->
</ul>
</div>
<script>
// 获取表单元素
const form = document.querySelector('form');
const title = document.querySelector('#title');
const url = document.querySelector('#url');
const description = document.querySelector('#description');
// 获取书签列表元素
const bookmarks = document.querySelector('#bookmarks');
<pre><code> // 从本地存储中获取书签数据
const bookmarkData = JSON.parse(localStorage.getItem('bookmarks')) || [];
// 渲染书签列表
renderBookmarks();
// 监听表单提交事件
form.addEventListener('submit', function(event) {
event.preventDefault();
// 获取表单数据
const bookmark = {
title: title.value,
url: url.value,
description: description.value
};
// 将书签数据添加到本地存储中
bookmarkData.push(bookmark);
localStorage.setItem('bookmarks', JSON.stringify(bookmarkData));
// 重新渲染书签列表
renderBookmarks();
// 清空表单数据
title.value = '';
url.value = '';
description.value = '';
});
// 监听删除按钮点击事件
bookmarks.addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
// 获取当前书签的索引
const index = event.target.parentNode.dataset.index;
// 从本地存储中删除该书签
bookmarkData.splice(index, 1);
localStorage.setItem('bookmarks', JSON.stringify(bookmarkData));
// 重新渲染书签列表
renderBookmarks();
}
});
// 渲染书签列表函数
function renderBookmarks() {
// 清空书签列表
bookmarks.innerHTML = '';
// 遍历书签数据并添加到列表中
bookmarkData.forEach(function(bookmark, index) {
const li = document.createElement('li');
li.innerHTML = `
<a href='${bookmark.url}' target='_blank'>${bookmark.title}</a>
<button>删除</button>
`;
li.dataset.index = index;
bookmarks.appendChild(li);
});
}
</script>
</code></pre>
</body>
</html>
<p>以上是一个简单的网页收藏夹的HTML代码，包含样式和txt数据储存功能。</p>
原文地址: https://www.cveoy.top/t/topic/l5zv 著作权归作者所有。请勿转载和采集!