<!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. Spring4.3入门 Spring 依赖关系

    Spring4.3入门 Spring 依赖关系 spring的jar包只有20个左右,每个都有相应的功能,一个jar还可能依赖了若干其他jar ,所以,搞清楚它们之间的关系,配置maven依赖就可以简 ...

  2. Mybatis Generator 最完整配置详解

    这是从CSDN找到的一篇翻译文章,尝试重新排版后转载. 1. < generatorConfiguration > 标签 1.1 可以用于加载配置项或者配置文件,在整个配置文件中就可以使用 ...

  3. C#——时间之不同国家的显示格式

    对于时间的显示,不同的地方有不同的时间格式,代码如下: public class Common_DateFormat { public Common_DateFormat() { // // TODO ...

  4. JavaScript 获取数组对象中某一值封装为数组

    1.获取数组对象中某一值封装为数组(一) data = [["2000-06-05",116],["2000-06-06",129]]; var dateLis ...

  5. [leetcode]725. Split Linked List in Parts链表分块

    思路很简单  按时链表的题做起来很容易犯小错误,思维要缜密 还要多练习啊 做之前最好画算法框图 public ListNode[] splitListToParts(ListNode root, in ...

  6. 简单session实现

    简单的session校验实现 利用拦截器实现 package com.ryh.blog.intecepter; import org.springframework.core.Ordered; imp ...

  7. Java学习日报7.20

    //7.20 三个和尚比身高import java.util.Scanner; //导包public class Hello{ public static void main(String[] arg ...

  8. Java学习日报7.15

    package oddor;import java.util.Scanner;public class Oddor{ public static void main(String args[]) { ...

  9. RTC_Configuration

    Void RTC_Configuration(void)// 实时时钟的初始化配置 { RCC_APB1PeriphClockCmd(RCC_APB1Periph_PWR | RCC_APB1Peri ...

  10. 用C#实现模拟双色球中奖程序 控制台应用程序

    前言 这是我在大一第一学期C#的课程设计,要求编写一个模拟双色球彩票的控制台应用程序,用以实现简单的模拟选购彩票. 一.双色球购号号码生成: 1.系统购号:通过"随机数"产生双色球 ...