用js给博客代码块添加复制按钮的实现方法

通过一个js完成很简单且很实用

步骤一： 新建codecopy.js在主题文件夹js里面新建一个codecopy.js文件。在文件里放入以下代码：

var codeblocks = document.getElementsByTagName("pre")
//循环每个pre代码块，并添加 复制代码
for (var i = 0; i < codeblocks.length; i++) {
 //显示 复制代码 按钮
 currentCode = codeblocks[i]
 currentCode.style = "position: relative;"
 var copy = document.createElement("div")
 copy.style = "position: absolute;right: 4px;\\
 top: 4px;background-color: white;padding: 2px 8px;\\
 margin: 8px;border-radius: 4px;cursor: pointer;\\
 z-index: 9999;\\
 box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05);"
 copy.innerHTML = "复制"
 currentCode.appendChild(copy)
 //让所有 "复制"按钮 全部隐藏
 copy.style.visibility = "hidden"
}
for (var i = 0; i < codeblocks.length; i++) {
 !function (i) {
 //鼠标移到代码块，就显示按钮
 codeblocks[i].onmouseover = function () {
 codeblocks[i].childNodes[1].style.visibility = "visible"
 }
 //执行 复制代码 功能
 function copyArticle(event) {
 const range = document.createRange();
 //范围是 code，不包括刚才创建的div
 range.selectNode(codeblocks[i].childNodes[0]);
 const selection = window.getSelection();
 if (selection.rangeCount > 0) selection.removeAllRanges();
 selection.addRange(range);
 document.execCommand(\'copy\');
 codeblocks[i].childNodes[1].innerHTML = "复制成功"
 setTimeout(function () {
 codeblocks[i].childNodes[1].innerHTML = "复制"
 }, 1000);
 //清除选择区
 if (selection.rangeCount > 0) selection.removeAllRanges(); 0
 }
 codeblocks[i].childNodes[1].addEventListener(\'click\', copyArticle, false);
 }(i);
 !function (i) {
 //鼠标从代码块移开 则不显示复制代码按钮
 codeblocks[i].onmouseout = function () {
 codeblocks[i].childNodes[1].style.visibility = "hidden"
 }
 }(i);
}

步骤二 ：应用codecopy.js打开模板目录下的footer.php文件，在文件末尾的前添加下面一行。

<script src="<?php $this->options->themeUrl(); ?>js/codecopy.js"></script>

大功告成，非常适用，待研究出来复制弹窗结合使用，绝绝子

感谢您的来访，获取更多精彩文章请收藏本站。