<!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. 项目1_001_涉及知识点（Django任务追踪平台）

  2. 分布式文件系统之 FastDFS

    FastDFS 百度百科 FastDFS 是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了大容量存储和负载均衡的问题.特别适合 ...

  3. [leetcode]82. Remove Duplicates from Sorted List

    第一题:遍历链表,遇到重复节点就连接到下一个. public ListNode deleteDuplicates(ListNode head) { if (head==null||head.next= ...

  4. python-OpenCV 使用GrabCut来实现图片的前景与后景的分割

    先上一个效果图: 使用Python3.7+OpenCV 3.x. 需要引入 numpy库. 在图上用鼠标左键和右键标记前景和后景即可.如果需要重新标记图像,关闭程序重新运行. 以下是具体实现代码. # ...

  5. Mac Arduino ESP8266 ESP32 搭建开发环境

    目录 1.安装Arduino 2.搭建开发板管理器 3.可能出现的错误 1.安装Arduino Arduino下载. 官方下载地址:Arduino官方网站 Arduino中文社区:下载地址 安装方式: ...

  6. 【Azure Application Insights】在Azure Function中启用Application Insights后，如何配置不输出某些日志到AI 的Trace中

    问题描述 基于.NET Core的Function App如果配置了Application Insights之后,每有一个函数被执行,则在Application Insights中的Logs中的tra ...

  7. HttpMessageConverter那回事

    相信使用过Spring的开发人员都用过@RequestBody.@ResponseBody注解,可以直接将输入解析成Json.将输出解析成Json,但HTTP 请求和响应是基于文本的,意味着浏览器和服 ...

  8. git 知识点积累

    1.初始化指定目录作为git目录  git init newpro 2.git add xx.uve 3.克隆项目 git clone git clone git://github.com/schac ...

  9. 不吹不黑，jupyter lab 3.0客观使用体验

    1 简介 jupyter lab于近期发布了其具有里程碑意义的3.0版本,随之带来的一些重要新特性,想必广大读者朋友已在各大公众号所翻译转载的jupyter lab团队官方介绍文章中知晓了很多. 图1 ...

  10. 使用Python实现的4种快速排序算法

    快速排序算法,总体来说就是选一个基准值,把小于基准值的分一拨,把大于基准值的分到另一拨,然后递归. 有区别的是,分区算法有差异,最直接的是,选个基准值,定义两个列表(小值分区less和大值分区grea ...