<!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. 如何用Python判断一个文件是否被占用？

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 今天有同学问,用os模块的access()能否判断一个文件是否被占用?直觉上,这是行不通的,因为ac ...

  2. Visual Studio 默认git拉取Github出错 No error could not read Username for 'https://github.com': terminal prompts disabled

    发布到远程存储库时遇到错误: Git failed with a fatal error.fatal: HttpRequestException encountered.   ��������ʱ��� ...

  3. Autofac的基本使用---1、前言

    Autofac的基本使用---目录 代码地址 https://github.com/catbiscuit/AutofacStudy 参考网上的大神,原博文地址 https://www.cnblogs. ...

  4. 爱普生 L4160 Serveies 网络打印机配置（问题解决）

    一.爱普生网络打印机固定IP地址 用网络打印机过程中,偶尔会出现打印机脱机的状况,大多数原因是打印机的IP地址在路由器重启过后重新分配了IP地址导致的.此时,为了减少不必要的麻烦就需要固定打印机的IP ...

  5. 【linux】系统编程-1-进程、管道和信号

    目录 1. 进程 1.1 概念 1.2 查看进程 1.3 启动新进程 1.3.1 system() 函数 1.3.2 fork() 函数 1.3.2 exce 系列函数 1.3.2.1 exce 系列 ...

  6. ubuntu系统64位dnw

    /* dnw2 linux main file. This depends on libusb. * * * * Author: Fox <hulifox008@163.com> * * ...

  7. C语言实现汉诺塔

    汉诺塔 要把A柱子上的盘子移动到C柱子上,在移动过程中可以借助B柱子,但是要求小的盘子在上大的盘子在下. 解题思路: 1.把A柱子上的前N-1个盘子借助C柱子,全部移动到B柱子上(过程暂不考虑),再把 ...

  8. 关于if-else代码的优化

    if-else分支代码在我们日常开发中基本上是最常用的逻辑,但是,经常在if-else代码过多的情况下,代码会变得特别臃肿,并且代码的可扩展性会变得不好,所以,优化if-else代码逻辑是很有必要的. ...

  9. [C#] 使用 Excel 和 Math.Net 进行曲线拟合和数据预测

    以前在工作中遇到了一个数据错误的问题,顺便写下 用 Math.Net 解决的思路. 1. 错误的数据 上图是同一组探测器在同一天采集到的 19 次数据,总体来说重复性不错,但很明显最后 8 个探测器出 ...

  10. 2020再见&新的计划(建立Android体系架构)

    2020,再见 关于2020,我心中有四个关键词: 疫情 年初突如其来的疫情,打破了原本生活的节奏,也没想到会笼罩全世界整整一年,希望这个世界早点好起来吧. 科比 初三的早晨,噩耗传来,我一度不敢相信 ...