给网站添加一个文章代码或内容一键复制模块

2025-07-22 5914 黑猫导航网

<div style="max-width: 100%; margin: 10px 0; border-radius: 6px; border: 1px solid #e0e0e0; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">

<div id="copyTip" style="display: none; position: absolute; background: rgba(0,0,0,0.7); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; z-index: 100;"></div>


<div style="overflow-x: auto; white-space: nowrap;">
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="padding: 12px; line-height: 1.5; color: #333;">
这是一个格子（添加更多内容试试，超过宽度会自动出现滚动条，比如这里可以放长文本、链接或代码片段等内容，滑动查看更方便）
</td>
</tr>
</table>
</div>


<div style="background: #f9f9f9; padding: 8px 12px; border-top: 1px solid #f0f0f0; text-align: right;">
<button id="copyBtn" style="padding: 5px 12px; border: none; border-radius: 4px; background: #007bff; color: white; cursor: pointer; font-size: 14px; transition: all 0.2s;">
一键复制
</button>
</div>
</div>

<script>
function copyTableContent() {
const content = document.querySelector('td').textContent;
const btn = document.getElementById('copyBtn');
const tip = document.getElementById('copyTip');

navigator.clipboard.writeText(content).then(() => {
// 显示悬浮提示
const rect = btn.getBoundingClientRect();
tip.style.left = (rect.left + window.scrollX) + 'px';
tip.style.top = (rect.top + window.scrollY - 30) + 'px';
tip.style.display = 'block';
tip.textContent = '已复制';

// 2秒后隐藏提示
setTimeout(() => {
tip.style.display = 'none';
}, 2000);
}).catch(() => {
alert('复制失败，请手动复制');
});
}

// 绑定按钮点击事件
document.getElementById('copyBtn').addEventListener('click', copyTableContent);
</script>

本文地址：https://www.hugogzs.top/post/120.html

1.本导航收录网站链接仅为用户提供便利，不代表认可其内容、服务及立场。
2.第三方网站内容更新等自行负责，黑猫导航不担合法性、安全性及准确性责任。
3.发现违法违规等不良内容请联系删除（QQ：[898820184]），核实后处理。
4.用户访问第三方网站应守法依规及遵守网站规定，风险自担。

评论列表（0条）

暂无评论，快来抢沙发吧~

发布评论取消回复

一	二	三	四	五	六	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31