专注活动,软件,教程分享 - 诺兰网,小刀娱乐网好东西不私藏

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

诺兰资源网 代码
扫码手机访问
0
摘要:通过一个js完成很简单且很实用步骤一:新建codecopy.js在主题文件夹js里面新建一个codecopy.js文件。在文件里放入以下代码:varcodeblocks=document.getEle...

通过一个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>

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

阅读时间:

字数统计:本文共有 1719 个字

本文标题:《用js给博客代码块添加复制按钮的实现方法》发布于2022-8-4

版权声明:文章由《诺兰资源网》发布、原创转载请保留出处!

本文链接:https://www.nuolanyl.com/post-942.html

上一篇
利用js实现网页标题title动态改变
下一篇
使用js给网站加一个复制弹窗

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:2877741347@qq.com

同类推荐

评论列表
签到

小姐姐视频

热门文章

随机推荐

代码 用js给博客代码块添加复制按钮的实现方法
通过一个js完成很简单且很实用步骤一: 新建codecopy.js在主题文件夹js里面新建一个codecopy.js文件。在文件里放入以下代码:var code...
扫描二维码阅读原文
诺兰资源网 January, 01
生成社交图 ×