网址收藏夹：轻松管理和搜索您的网站链接
<!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>
</tr>
</thead>
<tbody>
<!-- 这里将显示已收藏的网址 -->
</tbody>
</table>
</body>
</html>
```
<p>$(document).ready(function() { // 监听添加按钮点击事件 $('#add-btn').click(function() { // TODO：实现添加网址的逻辑 });</p>
<pre><code>// 监听删除按钮点击事件 $('#delete-btn').click(function() { // TODO：实现删除网址的逻辑 });
// 监听锁定按钮点击事件 $('#lock-btn').click(function() { // TODO：实现锁定网址的逻辑 });
// 监听解锁按钮点击事件 $('#unlock-btn').click(function() { // TODO：实现解锁网址的逻辑 });
// 监听搜索框输入事件 $('#search-input').on('input', function() { // TODO：实现搜索功能的逻辑 });});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();}
</code></pre>
<p>// 添加新网址if (isset($_POST['url'])) { $new_url = filter_input(INPUT_POST, 'url', FILTER_VALIDATE_URL); if ($new_url && !in_array($new_url, $urls)) { $urls[] = $new_url; file_put_contents($url_file, implode('
', $urls)); }}</p>
<p>// 删除网址if (isset($_POST['delete'])) { $delete_index = filter_input(INPUT_POST, 'delete', FILTER_VALIDATE_INT); if ($delete_index !== null && array_key_exists($delete_index, $urls)) { unset($urls[$delete_index]); file_put_contents($url_file, implode('
', $urls)); }}</p>
<p>// 锁定网址if (isset($_POST['lock'])) { $lock_index = filter_input(INPUT_POST, 'lock', FILTER_VALIDATE_INT); if ($lock_index !== null && array_key_exists($lock_index, $urls)) { $urls[$lock_index] = 'locked:' . $urls[$lock_index]; file_put_contents($url_file, implode('
', $urls)); }}</p>
<p>// 解锁网址if (isset($_POST['unlock'])) { $unlock_index = filter_input(INPUT_POST, 'unlock', FILTER_VALIDATE_INT); if ($unlock_index !== null && array_key_exists($unlock_index, $urls)) { $urls[$unlock_index] = str_replace('locked:', '', $urls[$unlock_index]); file_put_contents($url_file, implode('
', $urls)); }}</p>
<p>// 输出网址表格$search_term = filter_input(INPUT_POST, 'search', FILTER_SANITIZE_STRING);if ($search_term) { $filtered_urls = array_filter($urls, function($url) use ($search_term) { return strpos($url, $search_term) !== false; }); foreach ($filtered_urls as $index => $url) { $locked = strpos($url, 'locked:') === 0; $url = $locked ? substr($url, 7) : $url; echo '<tr class='' . ($locked ? 'locked' : '') . ''>'; 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>' . ($locked ? '锁定' : '正常') . '</td>'; echo '</tr>'; }} else { foreach ($urls as $index => $url) { $locked = strpos($url, 'locked:') === 0; $url = $locked ? substr($url, 7) : $url; echo '<tr class='' . ($locked ? 'locked' : '') . ''>'; 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>' . ($locked ? '锁定' : '正常') . '</td>'; echo '</tr>'; }}?></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>#url-table tbody tr.locked td { background-color: #f8d7da</p>
原文地址: https://www.cveoy.top/t/topic/mPkD 著作权归作者所有。请勿转载和采集!