因为自带的子比主题的独立下载页是没有复制按钮的,如果有提取码密码的话则需要人工复制一下密码,一来很麻烦二来也容易复制错,因此找到了这个一件复制的样式,分享给大家
教程分为两步,添加 css 样式和添加 js 代码即可如下
1.子比主题设置—>自定义代码—>自定义 CSS 样式:,添加以下 CSS 代码:
/* *子比主题下载页面一键复制提取码功能 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; } /* 子比主题下载页面一键复制提取码功能 css 样式结束 */
2.子比主题设置—>自定义代码—>自定义 javascript 代码:,添加以下 javascript 代码:
/* *子比主题下载页面一键复制提取码功能 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 代码结束 */
效果预览: