优化样式代码文件名：indexhtml!DOCTYPE htmlhtmlhead title网址收藏夹title meta charset=UTF-8 link rel=stylesheet href=stylecssheadbody h1网址收藏夹h1 form label for=name网址名：label input type=text id=name name=name require
<p>文件名：index.html</p>
<!DOCTYPE html>
<html>
<head>
<title>网址收藏夹</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>网址收藏夹</h1>
<form>
<label for="name">网址名：</label>
<input type="text" id="name" name="name" required>
<pre><code> <label for="url">URL：</label>
<input type="url" id="url" name="url" required>
<label for="status">状态：</label>
<select id="status" name="status">
<option value="正常">正常</option>
<option value="异常">异常</option>
<option value="未知">未知</option>
</select>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<button type="submit">添加</button>
<button id="delete">删除</button>
<button id="lock">锁定</button>
<button id="unlock">解锁</button>
<input type="text" id="search" placeholder="搜索">
</form>
</header>
<main>
<table>
<thead>
<tr>
<th>网址名</th>
<th>URL</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 网址信息通过PHP读取txt文件动态生成 -->
</tbody>
</table>
</main>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="main.js"></script>
</code></pre>
</body>
</html>
<p>文件名：main.js</p>
<p>$(document).ready(function() {
// 添加网址
$('form').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'add.php',
data: $(this).serialize(),
success: function(response) {
$('tbody').append(response);
$('form')[0].reset();
}
});
});</p>
<pre><code>// 删除网址
$('#delete').click(function() {
$.ajax({
type: 'POST',
url: 'delete.php',
data: $('input[type="checkbox"]:checked').serialize(),
success: function(response) {
$('input[type="checkbox"]:checked').closest('tr').remove();
}
});
});
// 锁定网址
$('#lock').click(function() {
$.ajax({
type: 'POST',
url: 'lock.php',
data: $('input[type="checkbox"]:checked').serialize(),
success: function(response) {
$('input[type="checkbox"]:checked').closest('tr').find('.status').text('锁定');
}
});
});
// 解锁网址
$('#unlock').click(function() {
var password = prompt('请输入密码');
$.ajax({
type: 'POST',
url: 'unlock.php',
data: {password: password, ids: $('input[type="checkbox"]:checked').serialize()},
success: function(response) {
if (response == 'success') {
$('input[type="checkbox"]:checked').closest('tr').find('.status').text('正常');
} else {
alert('密码错误');
}
}
});
});
// 搜索网址
$('#search').keyup(function() {
var keyword = $(this).val().toLowerCase();
$('tbody tr').hide().filter(function() {
return $(this).text().toLowerCase().indexOf(keyword) > -1;
}).show();
});
</code></pre>
<p>});</p>
<p>文件名：style.css</p>
<ul>
<li>{
box-sizing: border-box;
}</li>
</ul>
<p>body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}</p>
<p>header {
background-color: #f2f2f2;
padding: 20px;
}</p>
<p>main {
max-width: 800px;
margin: 20px auto;
}</p>
<p>table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}</p>
<p>th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}</p>
<p>th {
background-color: #f2f2f2;
}</p>
<p>tr:nth-child(even) {
background-color: #f2f2f2;
}</p>
<p>input[type="text"], input[type="url"], select, input[type="password"] {
display: block;
width: 100%;
padding: 8px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}</p>
<p>input[type="checkbox"] {
margin: 10px;
}</p>
<p>button[type="submit"], button {
background-color: #4CAF50;
color: white;
padding: 8px 16px;
margin: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}</p>
<p>button[type="submit"]:hover, button:hover {
background-color: #3e8e41;
}</p>
<p>#search {
float: right;
width: 200px;
height: 30px;
margin-top: -32px;
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
}</p>
<p>.hide {
display: none;
}</p>
<p>文件名：add.php</p>
<?php
// 过滤用户输入
$name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_STRING);
$url = filter_input(INPUT_POST, 'url', FILTER_VALIDATE_URL);
$status = filter_input(INPUT_POST, 'status', FILTER_SANITIZE_STRING);
$password = filter_input(INPUT_POST, 'password', FILTER_SANITIZE_STRING);
// 检查URL是否合法
if (!$url) {
echo 'URL不合法';
exit;
}
// 保存网址信息到txt文件
$file = fopen('data.txt', 'a');
fwrite($file, "$name\t$url\t$status\t$password\n");
fclose($file);
// 动态添加网址信息到表格
echo "<tr>\n";
echo "<td>$name</td>\n";
echo "<td><a href=\"$url\" target=\"_blank\">$url</a></td>\n";
echo "<td class=\"status\">$status</td>\n";
echo "<td><input type=\"checkbox\"></td>\n";
echo "</tr>\n";
?>
<p>文件名：delete.php</p>
<?php
// 读取txt文件中的网址信息
$file = file('data.txt');
// 获取要删除的网址ID
$ids = $_POST['id'];
// 逐行检查网址信息
foreach ($file as $key => $line) {
// 获取网址信息的ID
$id = $key + 1;
// 如果是要删除的网址，则将其从txt文件中删除
if (in_array($id, $ids)) {
unset($file[$key]);
}
}
// 将更新后的网址信息重新写入txt文件
file_put_contents('data.txt', implode('', $file));
?>
<p>文件名：lock.php</p>
<?php
// 读取txt文件中的网址信息
$file = file('data.txt');
// 获取要锁定的网址ID
$ids = $_POST['id'];
// 逐行检查网址信息
foreach ($file as $key => $line) {
// 获取网址信息的ID
$id = $key + 1;
// 如果是要锁定的网址，则将其状态设置为锁定
if (in_array($id, $ids)) {
$data = explode("\t", $line);
$data[2] = '锁定';
$file[$key] = implode("\t", $data);
}
}
// 将更新后的网址信息重新写入txt文件
file_put_contents('data.txt', implode('', $file));
// 返回锁定后的状态
echo '锁定';
?>
<p>文件名：unlock.php</p>
<?php
// 读取txt文件中的网址信息
$file = file('data.txt');
// 获取要解锁的网址ID
$ids = $_POST['id'];
// 获取密码
$password = $_POST['password'];
// 检查密码是否正确
if ($password != '123456') {
echo '密码错误';
exit;
}
// 逐行检查网址信息
foreach ($file as $key => $line) {
// 获取网址信息的ID
$id = $key + 1;
// 如果是要解锁的网址，则将其状态设置为正常
if (in_array($id, $ids)) {
$data = explode("\t", $line);
$data[2] = '正常';
$file[$key] = implode("\t", $data);
}
}
// 将更新后的网址信息重新写入txt文件
file_put_contents('data.txt', implode('', $file));
// 返回解锁成功信息
echo 'success';
?>
原文地址: https://www.cveoy.top/t/topic/bnQp 著作权归作者所有。请勿转载和采集!