首页 > 文章资讯 > 技术教程 > 帝国cms教程 > 帝国cms利用html+js实现一键复制某字段的内容

帝国cms利用html+js实现一键复制某字段的内容

时间：2024年04月12日

来源：网络

编辑：佚名

可以实现一键复制需要的字段。
HTML页面：
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
   <script src="js/clipboard.js"></script>
   <style>
       .tips,.tipsbg{display: none;}
       .tipsbg{width: 100%;height: 100%;position: fixed;background: rgba(0, 0, 0, 0.3); top: 0px; left: 0px; right: 0px; bottom: 0px;z-index: 2;}
       .tips{width: 160px;height: 200px;position: fixed;background: rgba(0, 0, 0, 0.5); top: 0px; left: 0px; right: 0px; bottom: 0px;z-index: 3;margin: 200px auto 0 auto;border-radius: 10px;}
       .tips img{width: 80px;margin: 30px auto;display: block;}
       .tipssuc{width: 100%;height: 40px;line-height: 40px;text-align: center;color: #fff;font-size: 16px;}
       .sidebar{width:30px;position:fixed;top:300px;left:50%;margin-left:-555px;z-index:9}
       .sidebar a {width: 42px;padding: 13px 0;color: #666;background: #fff;-webkit-box-shadow:0px 2px 15px 0px rgba(0,0,0,0.1);box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.1);border-radius: 21px;text-align: center;transition: all .2s cubic-bezier(.215,.61,.355,1);position: relative;cursor: pointer;margin-bottom:15px;display: block;text-decoration:none;}
       .sidebar span {font-size: 13px;display: block;padding: 0 12px;line-height: 17px;}
       .sidebar a:hover{background-color:#478ede; text-decoration:none;color:#fff;-webkit-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.3);box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);}
   </style>
</head>
<body>
   <div id="docopy" class="content">
       alskdjf
   </div>
   <div class="tipsbg" onclick="$('.tips').hide();$('.tipsbg').hide();"></div>
   <div id="success" class="tips" onclick="$('.tips').hide();$('.tipsbg').hide();">
       <img src="images/cg.png" alt="">
       <div class="tipssuc">复制成功</div>
   </div>
   <div class="sidebar">
       <a id="copytext" data-clipboard-action="copy" data-clipboard-target="#docopy" class="fuzhi"><span>一键复制</span></a>
   </div>
   <script>
       $(document).ready(function () {
           var clipboard = new ClipboardJS('#copytext');
           clipboard.on('success', function (e) {
               $('#success').show();
               $('.tipsbg').show();
           });
       });
   </script>
</body>
</html>
JS+html文件1649611865-12cba3ee81cf4a7.rar
打包下载地址：
https://www.zhann.cn/wp-content/uploads/2022/04/1649611865-12cba3ee81cf4a7.rar
备份链接: https://pan.baidu.com/s/1OMJ_fpGfqh9c7NCvcifbwA 提取码: tgti
效果演示：http://dhg1.78moban.com/dhg100z/5216.html

新闻资讯更多

猜你需要