• 日期: 2027-09-14
  • 标签: 常规
<!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><input type="checkbox" id="select-all-checkbox"></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();
			}
<pre><code>		// 输出网址表格
		foreach ($urls as $index =&gt; $url) {
			$locked = strpos($url, 'locked:') === 0;
			$url = $locked ? substr($url, 7) : $url;
			$name = $url;
			echo '&lt;tr&gt;';
			echo '&lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;url-checkbox&quot; value=&quot;' . $index . '&quot; ' . ($locked ? 'disabled' : '') . '&gt;&lt;/td&gt;';
			echo '&lt;td&gt;' . $name . '&lt;/td&gt;';
			echo '&lt;td&gt;&lt;a href=&quot;' . $url . '&quot; target=&quot;_blank&quot;&gt;' . $url . '&lt;/a&gt;&lt;/td&gt;';
			echo '&lt;td&gt;' . ($locked ? '锁定' : '正常') . '&lt;/td&gt;';
			echo '&lt;/tr&gt;';
		}
		?&gt;
	&lt;/tbody&gt;
&lt;/table&gt;
&lt;div id=&quot;add-dialog&quot; class=&quot;dialog&quot;&gt;
	&lt;h2&gt;添加网址&lt;/h2&gt;
	&lt;form&gt;
		&lt;label&gt;网址：&lt;/label&gt;
		&lt;input type=&quot;text&quot; name=&quot;url-input&quot; required&gt;
		&lt;label&gt;名称：&lt;/label&gt;
		&lt;input type=&quot;text&quot; name=&quot;name-input&quot; required&gt;
		&lt;button type=&quot;submit&quot;&gt;添加&lt;/button&gt;
		&lt;button type=&quot;button&quot; class=&quot;close-btn&quot;&gt;取消&lt;/button&gt;
	&lt;/form&gt;
&lt;/div&gt;
&lt;div id=&quot;delete-dialog&quot; class=&quot;dialog&quot;&gt;
	&lt;h2&gt;删除网址&lt;/h2&gt;
	&lt;form&gt;
		&lt;p&gt;确认删除选中的网址吗？&lt;/p&gt;
		&lt;button type=&quot;submit&quot;&gt;删除&lt;/button&gt;
		&lt;button type=&quot;button&quot; class=&quot;close-btn&quot;&gt;取消&lt;/button&gt;
	&lt;/form&gt;
&lt;/div&gt;
&lt;div id=&quot;lock-dialog&quot; class=&quot;dialog&quot;&gt;
	&lt;h2&gt;锁定网址&lt;/h2&gt;
	&lt;form&gt;
		&lt;p&gt;确认锁定选中的网址吗？&lt;/p&gt;
		&lt;button type=&quot;submit&quot;&gt;锁定&lt;/button&gt;
		&lt;button type=&quot;button&quot; class=&quot;close-btn&quot;&gt;取消&lt;/button&gt;
	&lt;/form&gt;
&lt;/div&gt;
&lt;div id=&quot;unlock-dialog&quot; class=&quot;dialog&quot;&gt;
	&lt;h2&gt;解锁网址&lt;/h2&gt;
	&lt;form&gt;
		&lt;p&gt;确认解锁选中的网址吗？&lt;/p&gt;
		&lt;label&gt;密码：&lt;/label&gt;
		&lt;input type=&quot;password&quot; name=&quot;unlock-password&quot;&gt;
		&lt;button type=&quot;submit&quot;&gt;解锁&lt;/button&gt;
		&lt;button type=&quot;button&quot; class=&quot;close-btn&quot;&gt;取消&lt;/button&gt;
	&lt;/form&gt;
&lt;/div&gt;
</code></pre>
</body>
</html>
<?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();
}

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

// 删除网址
 if (isset($_POST['action']) && $_POST['action'] === 'delete' && isset($_POST['urls'])) {
    $selected = $_POST['urls'];
    foreach ($selected as $index) {
        if (array_key_exists($index, $urls)) {
            unset($urls[$index]);
        }
    }
    file_put_contents($url_file, implode("\n", $urls));
    echo 'success';
}

// 锁定网址
 if (isset($_POST['action']) && $_POST['action'] === 'lock' && isset($_POST['urls'])) {
    $selected = $_POST['urls'];
    foreach ($selected as $index) {
        if (array_key_exists($index, $urls)) {
            // 判断网址是否已经被锁定
            if (strpos($urls[$index], 'locked:') === false) {
                $urls[$index] = 'locked:' . $urls[$index];
            }
        }
    }
    file_put_contents($url_file, implode("\n", $urls));
    echo 'success';
}

// 解锁网址
 if (isset($_POST['action']) && $_POST['action'] === 'unlock' && isset($_POST['urls']) && isset($_POST['password'])) {
    $selected = $_POST['urls'];
    $password = $_POST['password'];
    foreach ($selected as $index) {
        if (array_key_exists($index, $urls)) {
            // 判断网址是否已经被锁定
            if (strpos($urls[$index], 'locked:') !== false) {
                // 判断密码是否正确
                $lockedUrl = substr($urls[$index], 7);
                if ($password === '123') {
                    $urls[$index] = $lockedUrl;
                }
            }
        }
    }
    file_put_contents($url_file, implode("\n", $urls));
    echo 'success';
}
?>
<script>
$(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().toLowerCase();
		if (keyword !== '') {
			$('#url-table tbody tr').hide();
			$('#url-table tbody tr').filter(function() {
				return $(this).text().toLowerCase().indexOf(keyword) > -1;
			}).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 !== '' && newName !== '') {
				$.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();
				if (action === 'unlock') {
					var password = $(this).find('input[name="unlock-password"]').val();
					$.post('action.php', {action: action, urls: selected, password: password}, function(data) {
						if (data === 'success') {
							location.reload();
						} else {
							alert('操作失败，请重试');
						}
					});
				} else {
					$.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();
	});

	// 全选功能
	$('#select-all-checkbox').click(function() {
		$('input[name="url-checkbox"]:not(:disabled)').prop('checked', $(this).prop('checked'));
	});
});
</script>
<style>
body {
	font-family: Arial, sans-serif;
}

h1 {
	text-align: center;
}

.toolbar {
	margin-bottom: 20px;
}

#url-table {
	border-collapse: collapse;
	width: 100%;
}

#url-table th, #url-table td {
	border: 1px solid #ccc;
	padding: 8px;
}

#url-table th {
	background-color: #eee;
}

#url-table tbody tr:hover {
	background-color: #f0f0f0;
}

#url-table td:first-child {
	width: 20px;
}

#url-table td:last-child {
	width: 80px;
	text-align: center;
}

#search-input {
	margin-left: 20px;
	padding: 6px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.dialog {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	z-index: 999;
}

.dialog h2 {
	margin-top: 0;
}

.dialog label {
	display: inline-block;
	width: 60px;
}

.dialog input[type="text"] {
	width: 200px;
	padding: 6px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.dialog button {
	margin-top: 10px;
	padding: 6px 12px;
	background-color: #007bff;
	border: none;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
}

.dialog button[type="submit"] {
	margin-right: 10px;
}

.dialog button[type="button"] {
	background-color: #ccc;
}

.dialog p {
	margin-bottom: 0;
}
</style>
网址收藏夹：添加名称、全选功能、密码解锁

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

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