• 日期: 2025-03-19 16:41:57
  • 标签: 科技

HTML代码：

<!DOCTYPE html>
<html>
<head>
	<title>网址收藏夹</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="script.js"></script>
</head>
<body>
	<h1>网址收藏夹</h1>
	<div class="toolbar">
		<button id="add-btn">添加</button>
		<button id="delete-btn">删除</button>
		<button id="lock-btn">锁定</button>
		<button id="unlock-btn">解锁</button>
		<input type="text" id="search-input" placeholder="搜索">
	</div>
	<table id="url-table">
		<thead>
			<tr>
				<th></th>
				<th>网址</th>
				<th>备注名称</th>
				<th>状态</th>
			</tr>
		</thead>
		<tbody>
			<?php
			// 读取已保存的网址和备注名称
			$url_file = 'urls.txt';
			if (file_exists($url_file)) {
				$urls = file($url_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
			} else {
				$urls = array();
			}

			$name_file = 'names.txt';
			if (file_exists($name_file)) {
				$names = file($name_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
			} else {
				$names = array();
			}

			// 输出网址表格
			foreach ($urls as $index => $url) {
				$locked = strpos($url, 'locked:') === 0;
				$url = $locked ? substr($url, 7) : $url;
				echo '<tr>';
				echo '<td><input type="checkbox" name="url-checkbox" value="' . $index . '" ' . ($locked ? 'disabled' : '') . '></td>';
				echo '<td><a href="' . $url . '" target="_blank">' . $url . '</a></td>';
				echo '<td><input type="text" name="name-input" value="' . ($index < count($names) ? $names[$index] : '') . '" ' . ($locked ? 'disabled' : '') . '></td>';
				echo '<td>' . ($locked ? '锁定' : '正常') . '</td>';
				echo '</tr>';
			}
			?>
		</tbody>
	</table>
	<div id="add-dialog" class="dialog">
		<h2>添加网址</h2>
		<form>
			<label>网址：</label>
			<input type="text" name="url-input" required>
			<label>备注名称：</label>
			<input type="text" name="name-input">
			<button type="submit">添加</button>
			<button type="button" class="close-btn">取消</button>
		</form>
	</div>
	<div id="delete-dialog" class="dialog">
		<h2>删除网址</h2>
		<form>
			<p>确认删除选中的网址吗？</p>
			<button type="submit">删除</button>
			<button type="button" class="close-btn">取消</button>
		</form>
	</div>
	<div id="lock-dialog" class="dialog">
		<h2>锁定网址</h2>
		<form>
			<p>确认锁定选中的网址吗？</p>
			<button type="submit">锁定</button>
			<button type="button" class="close-btn">取消</button>
		</form>
	</div>
	<div id="unlock-dialog" class="dialog">
		<h2>解锁网址</h2>
		<form>
			<p>确认解锁选中的网址吗？</p>
			<button type="submit">解锁</button>
			<button type="button" class="close-btn">取消</button>
		</form>
	</div>
</body>
</html>

jQuery代码：

$(document).ready(function() {
	// 监听添加按钮点击事件
	$('#add-btn').click(function() {
		$('#add-dialog').show();
	});

	// 监听删除按钮点击事件
	$('#delete-btn').click(function() {
		var checked = $('input[name="url-checkbox"]:checked');
		if (checked.length > 0) {
			$('#delete-dialog').show();
		}
	});

	// 监听锁定按钮点击事件
	$('#lock-btn').click(function() {
		var checked = $('input[name="url-checkbox"]:checked');
		if (checked.length > 0) {
			$('#lock-dialog').show();
		}
	});

	// 监听解锁按钮点击事件
	$('#unlock-btn').click(function() {
		var checked = $('input[name="url-checkbox"]:checked');
		if (checked.length > 0) {
			$('#unlock-dialog').show();
		}
	});

	// 监听搜索框输入事件
	$('#search-input').on('input', function() {
		var keyword = $(this).val().trim();
		if (keyword !== '') {
			$('#url-table tbody tr').hide();
			$('#url-table tbody tr:contains("' + keyword + '")').show();
		} else {
			$('#url-table tbody tr').show();
		}
	});

	// 监听对话框提交事件
	$('.dialog form').submit(function(e) {
		e.preventDefault();
		var dialogId = $(this).parents('.dialog').attr('id');
		var action = '';
		var checked = $('input[name="url-checkbox"]:checked');
		switch (dialogId) {
			case 'add-dialog':
				action = 'add';
				break;
			case 'delete-dialog':
				action = 'delete';
				break;
			case 'lock-dialog':
				action = 'lock';
				break;
			case 'unlock-dialog':
				action = 'unlock';
				break;
		}
		if (action === 'add') {
			var newUrl = $(this).find('input[name="url-input"]').val().trim();
			var newName = $(this).find('input[name="name-input"]').val().trim();
			if (newUrl !== '') {
				$.post('action.php', {action: action, url: newUrl, name: newName}, function(data) {
					if (data === 'success') {
						location.reload();
					} else {
						alert('添加网址失败，请重试');
					}
				});
			} else {
				alert('网址不能为空');
			}
		} else if (action === 'delete' || action === 'lock' || action === 'unlock') {
			if (checked.length > 0) {
				var selected = checked.map(function() {
					return $(this).val();
				}).get();
				$.post('action.php', {action: action, urls: selected}, function(data) {
					if (data === 'success') {
						location.reload();
					} else {
						alert('操作失败，请重试');
					}
				});
			} else {
				alert('请选择要操作的网址');
			}
		}
	});

	// 监听对话框关闭按钮点击事件
	$('.dialog .close-btn').click(function() {
		$(this).parents('.dialog').hide();
	});
});

PHP代码：

<?php
// 读取已保存的网址和备注名称
$url_file = 'urls.txt';
if (file_exists($url_file)) {
	$urls = file($url_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
} else {
	$urls = array();
}

$name_file = 'names.txt';
if (file_exists($name_file)) {
	$names = file($name_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
} else {
	$names = array();
}

// 添加新网址和备注名称
if (isset($_POST['action']) && $_POST['action'] === 'add' && isset($_POST['url'])) {
	$newUrl = $_POST['url'];
	$newName = isset($_POST['name']) ? $_POST['name'] : '';
	if (!in_array($newUrl, $urls)) {
		if (filter_var($newUrl, FILTER_VALIDATE_URL)) {
			$urls[] = $newUrl;
			$names[] = $newName;
			file_put_contents($url_file, implode("\n", $urls));
			file_put_contents($name_file, implode("\n", $names));
			echo 'success';
		} else {
			echo 'invalid url';
		}
	} else {
		echo 'url already exists';
	}
}

// 删除网址和备注名称
if (isset($_POST['action']) && $_POST['action'] === 'delete' && isset($_POST['urls'])) {
	$selected = $_POST['urls
在添加网址的时候增加备注名称解锁更改成输入固定密码解说完成代码!DOCTYPE htmlhtmlhead title网址收藏夹title meta charset=UTF-8 link rel=stylesheet href=stylecss script src=httpscodejquerycomjquery-360minjsscript script src=scriptjsscripthe

原文地址: https://www.cveoy.top/t/topic/bmS9 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录