子比主题添加文件下载提取码中一键复制功能搬砖的小易5个月前更新关注私信05510 前言: 因为自带的子比主题的独立下载页是没有复制按钮的,如果有提取码密码的话则需要人工复制一下密码,一来很麻烦二来也容易复制错,因此找到了这个一件复制的样式,分享给大家 教程分为两步,添加 css 样式和添加 js 代码即可如下 1.子比主题设置—>自定义代码—>自定义 CSS 样式:,添加以下 CSS 代码: /* *by:易幻云网络 www.yihuanyun.cc *子比主题下载页面一键复制提取码功能 css 样式开始 *请本 CSS 代码放置子比主题设置->全局&功能->自定义 CSS 样式中即可 */ .but-download .badg { position: relative; cursor:pointer; } .but-download .badg::after { position: absolute; content: " "; width: 0; height: 0; top: -11px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); border-top: 10px solid rgb(236, 235, 235); border-left: 5px solid transparent; border-right: 5px solid transparent; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; opacity: 0; } .but-download .badg::before { content: attr(data-before); position: absolute; width: 100px; height: 31px; top: -40px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); font-size: 14px; line-height: 31px; border-radius: 4px; color: #6c6a6a; background-color: rgb(236, 235, 235); text-align: center; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; opacity: 0; } .but-download .badg:hover::after, .but-download .badg:hover::before { opacity: 1; } /* *by:易幻云网络 www.yihuanyun.cc *子比主题下载页面一键复制提取码功能 css 样式结束 */ 2.子比主题设置—>自定义代码—>自定义 javascript 代码:,添加以下 javascript 代码: /* *by:易幻云网络 www.yihuanhyun.cc *子比主题下载页面一键复制提取码功能 JavaScript 代码开始 *请本 JavaScript 代码放置子比主题设置->全局&功能->自定义 javascript 代码中即可 */ if(document.querySelectorAll(".but-download .badg")!=undefined){ const reg = /[a-zA-z0-9]/ig; const copy1 = document.querySelectorAll(".but-download .badg"); for (let i = 0; i < copy1.length; i++) { copy1[i].index = i; copy1[i].setAttribute("data-before", "点击复制"); copy1[i].addEventListener("click", copyOperation); copy1[i].addEventListener("mouseout", copyOk); } function copyOperation() { var oInput = document.createElement("input"); let text = this.innerText; text = text.match(reg).join(""); oInput.value = text; document.body.appendChild(oInput); oInput.select(); document.execCommand("Copy"); oInput.className = "oInput"; oInput.style.display = "none"; this.setAttribute("data-before", "已复制"); } function copyOk() { setTimeout(() => { this.setAttribute("data-before", "点击复制"); }, 300) } } /* *子比主题下载页面一键复制提取码功能 JavaScript 代码结束 *by:易幻云网络 www.yihuanyun.cc */ 展示效果 供学习和研究使用,禁止商业用途 购买前可以联系作者确认资源信息,防止交易矛盾 © 版权声明 版权声明 1 本网站名称:易幻云资源网 2 本站永久网址:https://www.yihuanyun.cc 3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ2956667505进行删除处理。 4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。 5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报 6 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。 THE END美化教程 喜欢就支持一下吧点赞10收藏