网址收藏夹：添加网址、删除、锁定和解锁功能
<!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 => $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>' . ($locked ? '<span style='color: red;'>[已锁定]</span>' : '') . '<a href='' . $url . '' target='_blank'>' . $url . '</a></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>
<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>
</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'])) {
$newUrl = $_POST['url'];
if (!in_array($newUrl, $urls)) {
if (filter_var($newUrl, FILTER_VALIDATE_URL)) {
$urls[] = $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'])) {
$selected = $_POST['urls'];
foreach ($selected as $index) {
if (array_key_exists($index, $urls)) {
// 判断网址是否已经被锁定
if (strpos($urls[$index], 'locked:') !== false) {
$urls[$index] = str_replace('locked:', '', $urls[$index]);
}
}
}
file_put_contents($url_file, implode('\n', $urls));
echo 'success';
}
?>
<p>$(document).ready(function() {
// 监听添加按钮点击事件
$('#add-btn').click(function() {
$('#add-dialog').show();
});</p>
<pre><code>// 监听删除按钮点击事件
$('#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();
if (newUrl !== '') {
$.post('action.php', {action: action, url: newUrl}, 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();
});
// 监听全选复选框点击事件
$('#select-all-checkbox').click(function() {
$('input[name='url-checkbox']').prop('checked', $(this).prop('checked'));
});
// 监听复选框点击事件
$('input[name='url-checkbox']').click(function() {
var checked = $('input[name='url-checkbox']:checked');
$('#select-all-checkbox').prop('checked', checked.length === $('input[name='url-checkbox']').length);
});
</code></pre>
<p>});</p>
<p>body {
font-family: Arial, sans-serif;
}</p>
<p>h1 {
text-align: center;
}</p>
<p>.toolbar {
margin-bottom: 20px;
}</p>
<p>#url-table {
border-collapse: collapse;
width: 100%;
}</p>
<p>#url-table th, #url-table td {
border: 1px solid #ccc;
padding: 8px;
}</p>
<p>#url-table th {
background-color: #eee;
}</p>
<p>#url-table tbody tr:hover {
background-color: #f0f0f0;
}</p>
<p>#url-table td:first-child {
width: 20px;
}</p>
<p>#url-table td:last-child {
width: 80px;
text-align: center;
}</p>
<p>#search-input {
margin-left: 20px;
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
}</p>
<p>.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;
}</p>
<p>.dialog h2 {
margin-top: 0;
}</p>
<p>.dialog label {
display: inline-block;
width: 60px;
}</p>
<p>.dialog input[type='text'] {
width: 200px;
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
}</p>
<p>.dialog button {
margin-top: 10px;
padding: 6px 12px;
background-color: #007bff;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
}</p>
<p>.dialog button[type='submit'] {
margin-right: 10px;
}</p>
<p>.dialog button[type='button'] {
background-color: #ccc;
}</p>
<p>.dialog p {
margin-bottom: 0;</p>
原文地址: https://www.cveoy.top/t/topic/mPyi 著作权归作者所有。请勿转载和采集!