网址收藏夹代码

Forever伟

于 2024-04-20 21:20:04 发布

阅读量1.3k

点赞数 37

文章标签：前端

本文链接：https://blog.csdn.net/2402_83286556/article/details/138011990

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网址收藏</title>
<style>
/* 添加样式以使页面看起来更加生动 */
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
cursor: pointer;
background-color: #f0f0f0;
padding: 5px 10px;
border-radius: 5px;
transition: background-color 0.3s ease;
position: relative;
}
li:hover {
background-color: #e0e0e0;
}
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
}
.pagination button {
margin: 0 5px;
padding: 5px 10px;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.pagination button:hover {
background-color: #0056b3;
}
/* 添加样式以使数字序号背景为正方形 */
.url::before {
content: attr(data-order);
background-color: #007bff;
color: #fff;
padding: 5px;
border-radius: 50%;
margin-right: 10px;
width: 15px; /* Set width to 15px */
height: 15px; /* Set height to 15px */
text-align: center; /* Center the text */
line-height: 15px; /* Vertically center the text */
display: inline-block;
}

/* Remove default styles and underline from <a> tags */
.url a {
text-decoration: none;
color: inherit;
margin-right: 10px;
}

/* Style for copy button */
.copy-button {
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
z-index: 1; /* Ensure button appears above other content */
}

.copy-button:hover {
background-color: #0056b3;
}

/* Show copy button on hover */
li:hover .copy-button {
opacity: 1;
}

/* Style for copied button */
.copied {
background-color: #28a745;
}

.copied:hover {
background-color: #218838;
}
</style>
</head>
<body>

<ul class="urls">
<li class="url"><a href="https://www.example1.com">https://www.example1.com</a><button class="copy-button">复制</button></li>
<li class="url"><a href="https://www.example2.com">https://www.example2.com</a><button class="copy-button">复制</button></li>
<li class="url"><a href="https://www.example3.com">https://www.example3.com</a><button class="copy-button">复制</button></li>
<li class="url"><a href="https://www.example4.com">https://www.example4.com</a><button class="copy-button">复制</button></li>
<li class="url"><a href="https://www.example5.com">https://www.example5.com</a><button class="copy-button">复制</button></li>
<li class="url"><a href="https://www.example6.com">https://www.example6.com</a><button class="copy-button">复制</button></li>
<li class="url"><a href="https://www.example7.com">https://www.example7.com</a><button class="copy-button">复制</button></li>
<li class="url"><a href="https://www.example8.com">https://www.example8.com</a><button class="copy-button">复制</button></li>
<li class="url"><a href="https://www.example9.com">https://www.example9.com</a><button class="copy-button">复制</button></li>
<li class="url"><a href="https://www.example10.com">https://www.example10.com</a><button class="copy-button">复制</button></li>
<li class="url"><a href="https://www.example11.com">https://www.example11.com</a><button class="copy-button">复制</button></li>
</ul>

// Add numerical order to each URL
urls.forEach(function(url, index) {
url.dataset.order = index + 1;
});

// Sort URLs by numeric order
urls = Array.from(urls).sort((a, b) => {
var numA = parseInt(a.dataset.order);
var numB = parseInt(b.dataset.order);
return numA - numB;
});

function displayUrls(page) {
var startIndex = (page - 1) * perPage;
var endIndex = startIndex + perPage;
var displayUrls = urls.slice(startIndex, endIndex);

updatePagination();
}

function updatePagination() {
var pageInfo = document.getElementById('pageInfo');
pageInfo.textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;

var prevPageBtn = document.getElementById('prevPage');
var nextPageBtn = document.getElementById('nextPage');

prevPageBtn.disabled = currentPage === 1;
nextPageBtn.disabled = currentPage === totalPages;
}

function copyToClipboard(text) {
var tempInput = document.createElement('input');
tempInput.setAttribute('value', text);
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
alert('已复制到剪贴板');
}

displayUrls(currentPage);

document.getElementById('prevPage').addEventListener('click', function() {
if (currentPage > 1) {
currentPage--;
displayUrls(currentPage);
}
});

document.getElementById('nextPage').addEventListener('click', function() {
if (currentPage < totalPages) {
currentPage++;
displayUrls(currentPage);
}
});
});
</script>

</body>
</html>

Forever伟

关注

37
点赞
踩
32

收藏

觉得还不错? 一键收藏
0
评论
网址收藏夹代码

https://www.example10.com</a><button class="copy-button">复制</button></li><li class="url"><a href="https://www.example11.com">https://www.example11.com复制
复制链接

扫一扫

网址收藏夹 代码

网址收藏夹代码