<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>jQuery 复制功能</title>

        <link rel="stylesheet" href="css/bootstrap4.5.min.css">

        <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/clipboard.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <style>

            .share-card {

                box-shadow: 0px 3px 8px 0 rgba(54, 57, 73, .1);

                color: #fff;

                margin: 0 auto;

            }

            .share-cardCode {

                margin: auto;

                padding: 10px 5px;

                border: 2px dashed #fff;

                background-color: transparent;

            }

            .share-card .active {

                margin: auto;

                padding: 10px 5px;

                color: #0070ff;

                border: 2px dashed #0070ff;

                background: transparent;

                cursor: auto;

            }

            .share-copied {

                /*opacity: 0;*/

                width: 80px;

                background: #101010;

                margin: 41px -60px;

                text-align: center;

                border-radius: 5px;

                display: inline-block;

                padding: 8px 0;

                position: relative;

                font: normal normal normal 15px/1 FontAwesome;

            }

            .share-copied::before {

                position: absolute;

                content: '';

                margin: auto;

                left: 32px;

                top: -20px;

                border-right: 10px solid #0000;

                border-bottom: 10px solid black;

                border-top: 10px solid transparent;

                border-left: 10px solid transparent;

            }

            .btn:hover {

                color: #fff !important;

            }

        </style>

        <section>

            <div class="max-width">

                <span id="coupon-code-invalid-reasons"></span>

                <div class="share-card text-center py-3 w-md-70 w-lg-50 mt-3 mt-md-5" style="background-color: rgba(51, 51, 51, 0.45)">

                    <div class="share-cardCode mb-3 w-70 w-md-50">

                        <p class="font-24 mb-0 share-card Code-number" id="copy1">这世界我来了，任凭风暴漩涡</p>

                    </div>

                    <button type="button" id="btns" class="btn w-40 margin-auto mb-0 mb-md-3 color-fff btns" data-toggle="modal" style="background-color:#0070ff;">

                            复制

                    </button>

                </div>

            </div>

        </section>

        <script type="text/javascript">

            var clipboard = new ClipboardJS(".btns", {

                text: function() {

                    //清除字符串两端的空白

                    var texts = $(".Code-number").text().trim()

                    return texts;

                }

            })

            //复制成功

            clipboard.on('success', function(e) { //复制成功

                console.log(e);

                var tootpli = $('<div class="share-copied position-absolute"><span class="d-block">copied!</span></div>');

                $(e.trigger).append(tootpli);

                setTimeout(function() { // 2秒后隐藏

                    tootpli.remove();

                }, 2000);

            });

            clipboard.on('error', function(e) {

            });

        </script>

    </body>

</html>

效果预览：

jQuery 实现复制功能的更多相关文章

  1. 兼容多浏览器的网页复制插件（ZeroClipboard）

    前言: 常规利用JS编写的网页复制功能是最简单的方法,但是只对IE有效,无法做到兼容其它浏览器,对其他浏览器也就只能弹窗提示用户手动复制了. <script type="text/ja ...

  2. Jquery 复制功能

    使用clipboardjs插件实现鼠标点击复制功能: 官网:https://clipboardjs.com/ 使用示例: 1.引入 <script type="text/javascr ...

  3. HTML 学习笔记 JQuery（DOM 操作2）

    接着上一节的将,这一节从复制节点讲起 复制节点 继续使用之前的例子 如果单击<li>元素后 需要在复制一个<li>元素,可以使用clone()方法完成.全部代码如下 <h ...

  4. JQuery知识点总结

    一. 1.JavaScript是Netscape公司开发的一种脚本语言(scripting language).JavaScript的出现实现了使得网页和用户之间实时的,动态的和交互的关系,使网页包含 ...

  5. 使用jQuery的animate方法制作滑动菜单

    周末看Ziv小威的博客<制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿>,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html.是 ...

  6. jquery.zclip轻量级复制失效问题

    工作原理 利用一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了 <script src="js/jquer ...

  7. jQuery -- DOM节点的操作

    DOM 操作的分类: dom core: getElementById() getElementsByTagName() getAttribute() setAttribute() html-dom ...

  8. jQuery插件：跨浏览器复制jQuery-zclip

    jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题.jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe F ...

  9. jQuery插件：跨浏览器复制jQuery-zclip（转载）

    转载地址:http://www.cnblogs.com/linjiqin/p/3532451.html jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和 ...

随机推荐

  1. npm install 报错解决办法

    npm install 报错解决办法 原因是因为node_modules可能有意外改动,导致依赖库不完整,删除项目下的node_modules,在你的项目目录下,重新执行npm install,这会重 ...

  2. SQL优化器-RBO与CBO分别是什么

    数据库系统发展历史 数据库系统产生于20世纪60年代中期,至今有近50多年的历史,其发展经历了三代演变,造就了四位图灵奖得主,发展成为一门计算机基础学科,带动了一个巨大的软件产业. 数据库系统是操作系 ...

  3. 10天，从.Net转Java，并找到月薪2W的工作（三）

    放弃Offer之后,压力一天比一天打 好点的公司,除了技术追根问底,还对你平时代码实践问的很多.比如问你,redis缓存一般设置多大.问你项目内容的细节,业务流程. 集合.锁.Jvm.多线程高并发.微 ...

  4. Adnroid 源码学习笔记：Handler 线程间通讯

    常见的使用Handler线程间通讯: 主线程: Handler handler = new Handler() { @Override public void handleMessage(Messag ...

  5. Double 值比较大小 Long值比较大小

    BigDecimal outValue = new BigDecimal(sapVerifyInventory.getQuantity()); BigDecimal inValue = new Big ...

  6. Mac电脑远程连接SSH Host key verification failed 解决办法

    苹果电脑远程连接SSH出现如下问题: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@                     ...

  7. ESP8266系列图片外观 Wi-Fi模块一共有01～14十多款模块

  8. python保存二维列表到txt文件，读取txt文件里面的数据转化为二维列表

    源码: # 读文件里面的数据转化为二维列表 def Read_list(filename): file1 = open(filename+".txt", "r" ...

  9. Jquery真的不难~第一回 编程基础知识

    Jquery真的不难~第一回 编程基础知识   回到目录 前言 说Jquery之前,先来学习一下Javascript(以后简称为JS)语言中的基础知识问题,其时对于每种编程语言来说基础知识都是大同小异 ...

  10. 每日一个linux命令6 -- rmdir

    rmdir doc 如果doc为空目录则删除,否则无法删除. rmdir -p test2/test3 递归删除空目录,首先判断test3,如果test3为空,则删除test3,此时判断test2,如 ...