【Clipboard】使用clipboardjs实现仿CSDN代码复制功能

demo.html代码：

    
    
    
    

    



            <h1>Example heading </h1>
<h2>Example heading </h2>
<h3>Example heading </h3>
<h4>Example heading </h4>
<h5>Example heading </h5>
<h6>Example heading </h6>
        

codecopy.css代码：

/*pre标签class*/
.codecopy{
    position: relative;
}
/*pre标签悬浮 复制按钮出现*/
.codecopy:hover .codecopy-btn{
    display: block;
}
/*复制按钮样式*/
.codecopy-btn{
    display: none;
    position: absolute;
    right: 4px;
    top: 22px;
    font-size: 12px;
    color: #4d4d4d;
    background-color: white;
    padding: 2px 8px;
    margin: 8px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05);
}

codecopy.js代码：

/*生成复制按钮*/
//获取所有的代码区域的pre元素节点
const codecopys = document.getElementsByClassName('codecopy');
//遍历DOM（pre节点）节点
for (let i = 0; i < codecopys.length; i++) {
    //pre元素对象
    let codecopy = codecopys[i];

    //获取时间戳
    let time = new Date().getTime();

    //生成复制按钮
    let html_temp = '
复制
';

    //找到code元素，并添加id属性，id的值和复制按钮的属性 data-clipboard-target 的值（去掉#符号后，注：data-clipboard-target的值就是元素选择器的值）是一样的
    codecopy.firstChild.nextSibling.id = 'code_' + time;//setAttribute('id', 'code_' + time);

    //将复制按钮追加至页面
    let html = codecopy.innerHTML + html_temp;

    codecopy.innerHTML = html;
}
/*初始化复制功能*/
const clipboardJs = new ClipboardJS('.codecopy-btn');//注意：ClipboardJS替代了Clipboard

/*复制成功事件*/
clipboardJs.on('success', function (e) {
    console.log(e);
});
/*复制失败事件*/
clipboardJs.on('error', function (e) {
    console.log(e);
});

/*点击事件*/
function onC(ths) {
    ths.innerHTML = '复制成功';
}
/*鼠标移出事件*/
function mOut(ths) {
    setTimeout(function () {
        ths.innerHTML = '复制';
    }, 1500);
}

 最终效果：

 

最初版本完整包下载地址：https://download.csdn.net/download/csdnvip2011/10932531

注：下载最新版本移步至更新日志

更新日志：

2019-1-24

1. 简化代码，简化或只需在pre标签的class加上codecopy即可 。
2. 用webpack压缩css和js代码，现在只需引入codecopy.bundle.js这个文件即可。

注：不了解highlightjs的同学了解下：https://highlightjs.org/

点击下载最新版本完整包