网页书签收藏器 - 轻松管理您的网址 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>网页书签收藏器</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
		}
		h1 {
			text-align: center;
			margin-top: 50px;
		}
		form {
			margin: 50px auto;
			width: 70%;
			padding: 30px;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0,0,0,0.3);
			border-radius: 5px;
		}
		label {
			display: block;
			margin-bottom: 10px;
			font-size: 18px;
			font-weight: bold;
		}
		input[type='text'], textarea {
			display: block;
			width: 100%;
			padding: 10px;
			border: none;
			background-color: #f2f2f2;
			border-radius: 5px;
			font-size: 16px;
			margin-bottom: 20px;
		}
		button {
			background-color: #4CAF50;
			color: #fff;
			border: none;
			padding: 10px 20px;
			font-size: 16px;
			border-radius: 5px;
			cursor: pointer;
		}
		button:hover {
			background-color: #3e8e41;
		}
		ul {
			margin-top: 50px;
			padding: 0;
			list-style: none;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		li {
			margin: 10px;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0,0,0,0.3);
			border-radius: 5px;
			overflow: hidden;
			max-width: 300px;
		}
		li:hover {
			transform: translateY(-5px);
			box-shadow: 0 5px 10px rgba(0,0,0,0.3);
		}
		li a {
			display: block;
			padding: 20px;
			text-decoration: none;
			color: #333;
		}
		li p {
			margin: 0;
			font-size: 14px;
			color: #666;
			padding: 0 20px 20px;
		}
		li img {
			max-width: 100%;
			height: auto;
			margin-bottom: -5px;
		}
	</style>
</head>
<body>
	<h1>网页书签收藏器</h1>
	<form>
		<label for='name'>网站名称：</label>
		<input type='text' id='name' name='name' required>
		<label for='url'>网站地址：</label>
		<input type='text' id='url' name='url' required>
		<label for='description'>网站描述：</label>
		<textarea id='description' name='description'></textarea>
		<button type='submit' id='submit'>添加收藏</button>
	</form>
	<ul id='bookmarks'>
<pre><code>&lt;/ul&gt;
&lt;script src='https://code.jquery.com/jquery-3.5.1.min.js'&gt;&lt;/script&gt;
&lt;script&gt;
	$(document).ready(function() {
		// 获取收藏夹列表
		showBookmarks();

		// 添加收藏夹
		$('#submit').on('click', function(e) {
			e.preventDefault();
			var name = $('#name').val();
			var url = $('#url').val();
			var description = $('#description').val();
			if (name &amp;&amp; url) {
				var bookmark = {
					name: name,
					url: url,
					description: description
				}
				// 保存收藏夹到本地存储
				saveBookmark(bookmark);
				// 清空收藏表单
				clearForm();
				// 显示收藏夹列表
				showBookmarks();
			} else {
				alert('请填写网站名称和地址！');
			}
		});

		// 删除收藏夹
		$('#bookmarks').on('click', '.delete', function() {
			var id = $(this).data('id');
			// 从本地存储中删除收藏夹
			deleteBookmark(id);
			// 显示收藏夹列表
			showBookmarks();
		});
	});

	// 保存收藏夹到本地存储
	function saveBookmark(bookmark) {
		var bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
		bookmarks.push(bookmark);
		localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
	}

	// 删除收藏夹
	function deleteBookmark(id) {
		var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
		bookmarks.splice(id, 1);
		localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
	}

	// 显示收藏夹列表
	function showBookmarks() {
		var bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
		$('#bookmarks').empty();
		$.each(bookmarks, function(index, bookmark) {
			var li = '&lt;li&gt;' +
					'&lt;a href='' + bookmark.url + '' target='_blank'&gt;' +
						'&lt;img src='https://www.google.com/s2/favicons?domain=' + bookmark.url + ''&gt;' +
						'&lt;span&gt;' + bookmark.name + '&lt;/span&gt;' +
					'&lt;/a&gt;' +
					'&lt;p&gt;' + bookmark.description + '&lt;/p&gt;' +
					'&lt;button class='delete' data-id='' + index + ''&gt;删除&lt;/button&gt;' +
				'&lt;/li&gt;';
			$('#bookmarks').append(li);
		});
	}

	// 清空收藏表单
	function clearForm() {
		$('#name').val('');
		$('#url').val('');
		$('#description').val('');
	}
&lt;/script&gt;
</code></pre>
</body>
</html>