在线网址收藏夹 - 方便管理您的网站链接
<!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 $url $status $password
");
fclose($file);
// 动态添加网址信息到表格
echo "<tr>
";
echo "<td>$name</td>
";
echo "<td><a href="$url" target="_blank">$url</a></td>
";
echo "<td class="status">$status</td>
";
echo "<td><input type="checkbox"></td>
";
echo "</tr>
";
?>
<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(" ", $line);
$data[2] = '锁定';
$file[$key] = implode(" ", $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(" ", $line);
$data[2] = '正常';
$file[$key] = implode(" ", $data);
}
}
// 将更新后的网址信息重新写入txt文件
file_put_contents('data.txt', implode('', $file));
// 返回解锁成功信息
echo 'success';
?>
原文地址: https://www.cveoy.top/t/topic/mQt6 著作权归作者所有。请勿转载和采集!