最简单的纯 HTML + JavaScript (无样式)
这种方法最直接,适合快速实现。
（图片来源网络，侵删）
核心思路：
- 在 HTML 中，参考文献的链接放在一个
<a>标签里。 - 为每个参考文献项创建一个
<button>。 - 为这个按钮添加一个
onclick事件，调用一个 JavaScript 函数。 - JavaScript 函数接收要复制的链接作为参数，并使用
navigator.clipboard.writeText()将其复制到剪贴板。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">参考文献示例</title>
</head>
<body>
<h2>参考文献</h2>
<ul>
<!-- 参考文献条目 1 -->
<li>
[1] 作者. 文章标题[J]. 期刊名, 年份, 卷(期): 页码.
<button onclick="copyLink('https://doi.org/xxxxx')">复制链接</button>
</li>
<!-- 参考文献条目 2 -->
<li>
[2] 作者. 书名[M]. 出版地: 出版社, 出版年份.
<button onclick="copyLink('https://example.com/book2')">复制链接</button>
</li>
<!-- 参考文献条目 3 -->
<li>
[3] 作者. 网页标题[EB/OL]. (发布日期或更新日期)[引用日期]. 获取路径.
<button onclick="copyLink('https://www.example.com/article3')">复制链接</button>
</li>
</ul>
<script>
function copyLink(url) {
// 现代浏览器都支持 Clipboard API
navigator.clipboard.writeText(url).then(() => {
alert('链接已复制到剪贴板！');
}).catch(err => {
// 如果失败，可以回退到旧方法或提示用户
console.error('复制失败:', err);
alert('复制失败，请手动复制。');
});
}
</script>
</body>
</html>
带样式的 HTML + JavaScript (更美观)
使用 CSS 来美化按钮和列表，使其看起来更专业。
核心思路：
在方法一的基础上，添加 <style> 标签来定义 CSS 样式。
（图片来源网络，侵删）
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">带样式的参考文献</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #333;
margin: 20px;
}
h2 {
color: #2c3e50;
}
/* 参考文献列表样式 */
.reference-list {
list-style-type: none;
padding: 0;
}
.reference-list li {
background-color: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 5px;
padding: 15px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 参考文献文本样式 */
.reference-text {
flex-grow: 1;
margin-right: 15px;
}
/* 复制按钮样式 */
.copy-btn {
background-color: #007bff;
color: white;
border: none;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s;
}
.copy-btn:hover {
background-color: #0056b3;
}
.copy-btn:active {
transform: scale(0.98);
}
</style>
</head>
<body>
<h2>参考文献</h2>
<ul class="reference-list">
<li>
<span class="reference-text">[1] 作者. 文章标题[J]. 期刊名, 2025, 15(3): 45-52.</span>
<button class="copy-btn" onclick="copyLink('https://doi.org/xxxxx')">复制链接</button>
</li>
<li>
<span class="reference-text">[2] 作者. 书名[M]. 北京: 科学出版社, 2025.</span>
<button class="copy-btn" onclick="copyLink('https://example.com/book2')">复制链接</button>
</li>
<li>
<span class="reference-text">[3] 作者. 网页标题[EB/OL]. (2025-10-27)[2025-10-27]. https://www.example.com/article3.</span>
<button class="copy-btn" onclick="copyLink('https://www.example.com/article3')">复制链接</button>
</li>
</ul>
<script>
function copyLink(url) {
navigator.clipboard.writeText(url).then(() => {
// 可以在这里用更友好的方式提示，而不是 alert
const btn = event.target; // 获取被点击的按钮
const originalText = btn.innerText;
btn.innerText = '已复制!';
btn.style.backgroundColor = '#28a745';
setTimeout(() => {
btn.innerText = originalText;
btn.style.backgroundColor = ''; // 恢复原背景色
}, 2000); // 2秒后恢复
}).catch(err => {
console.error('复制失败:', err);
alert('复制失败，请手动复制。');
});
}
</script>
</body>
</html>
使用数据驱动和事件委托 (更专业、更灵活)
当参考文献列表很长或需要动态加载时,硬编码 onclick 会很麻烦，这种方法更符合现代前端开发的最佳实践。
核心思路：
- 将参考文献数据（如文本和链接）存储在一个 JavaScript 数组中。
- 使用 JavaScript 动态生成整个参考文献列表的 HTML。
- 使用“事件委托”，只在父元素（如
<ul>）上设置一个事件监听器，而不是为每个按钮都添加一个，这样可以提高性能，并简化代码。
代码示例：
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">动态生成的参考文献</title>
<style>
/* 样式与方法二基本相同 */
body { font-family: sans-serif; line-height: 1.6; margin: 20px; }
h2 { color: #2c3e50; }
.reference-list { list-style-type: none; padding: 0; }
.reference-list li {
background-color: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 5px;
padding: 15px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.reference-text { flex-grow: 1; margin-right: 15px; }
.copy-btn {
background-color: #007bff;
color: white;
border: none;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s;
}
.copy-btn:hover { background-color: #0056b3; }
.copy-btn.copied {
background-color: #28a745;
}
</style>
</head>
<body>
<h2>参考文献</h2>
<ul id="reference-list" class="reference-list">
<!-- 列表将由 JavaScript 动态生成 -->
</ul>
<script>
// 1. 数据源：将参考文献数据集中管理
const references = [
{
id: 1,
text: "[1] 作者. 文章标题[J]. 期刊名, 2025, 15(3): 45-52.",
url: "https://doi.org/xxxxx"
},
{
id: 2,
text: "[2] 作者. 书名[M]. 北京: 科学出版社, 2025.",
url: "https://example.com/book2"
},
{
id: 3,
text: "[3] 作者. 网页标题[EB/OL]. (2025-10-27)[2025-10-27]. https://www.example.com/article3.",
url: "https 
