双十一已经来临，天猫双11活动已经启动了，超级红包活动也启动了，如何给自己的网站添加一键复制淘口令功能？
第一步：下载JS文件
clipboard.js 是一个 Github 上的开源项目，可以实现纯 JavaScript 的浏览器内容复制到系统剪贴板的功能！
第二步：引用JS文件
将下载的 clipboard.min.js 上传到网站根目录，在 WordPress 的 footer.php 的末尾添加如下代码：
<script src="/clipboard.min.js" type="text/javascript"></script>
<script>
var clipboard = new Clipboard('.itemCopy');
clipboard.on('success',
function(e) {
if (e.trigger.disabled == false || e.trigger.disabled == undefined) {
e.trigger.innerHTML = "复制成功";
e.trigger.disabled = true;
setTimeout(function() {
e.trigger.innerHTML = "一键复制";
e.trigger.disabled = false;
},
2000);
}
});
clipboard.on('error',
function(e) {
e.trigger.innerHTML = "复制失败";
});
</script>CSS美化代码：
.red_tkl {
color: #faffffde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottombottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red_tkl:hover {
background: #b61318;
background: -webkit-gradient(linear, left top, left bottombottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red_tkl:active {
color: #de898c;
background: -webkit-gradient(linear, left top, left bottombottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}
.button_tkl {
display: inline-block;
*display: inline;
vertical-align: baselinebaseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button_tkl:hover {
text-decoration: none;
}
.button_tkl:active {
position: relative;
top: 1px;
}第三步：使用教程
JS与CSS文件引用之后，在文章中的某个需要复制的地方放一个按钮就可以了，代码如下：
<button class="itemCopy red_tkl button_tkl" id="TKLS" type="button" data-clipboard-text="需要复制的内容">一键复制</button>
本文首发于好主机
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/128236.html
摘要：新手站长网整理了一下从阿里云服务器购买服务器节点选择及备案使用宝塔面板实现云服务器环境一键配置安装到网站上线全过程阿里云服务器购买阿里云服务器购买还是很简单的，直接去官网选择适合自己的配置即可。阿里云服务器应该算是国内云服务器中的NO.1，很多新手站长最初都是从虚拟主机开始搭建网站的，刚刚接触云服务器的站长要自己搭建Web环境有些乱，其实我们使用阿里云服务器结合目前国内的主机面板即可轻松应对...
摘要：阿里云服务器应该算是国内云服务器中的，很多新手站长最初都是从虚拟主机开始搭建网站的，刚刚接触云服务器的站长要自己搭建环境有些乱，其实我们使用阿里云服务器结合目前国内的主机面板即可轻松应对。阿里云服务器应该算是国内云服务器中的NO.1，很多新手站长最初都是从虚拟主机开始搭建网站的，刚刚接触云服务器的站长要自己搭建Web环境有些乱，其实我们使用阿里云服务器结合目前国内的主机面板即可轻松应对。新手...
摘要：本文将介绍在云厂商购买服务器之后，为了确保服务器的安全，开发者应该要做的一些配置。新建云服务器实例在开始配置之前，我们先新建一个云服务器实例。 推荐理由： 许多个人开发者在云服务器上搭建网站时，喜欢使用 Ubuntu 操作系统；那么在云厂商购买 了Ubuntu 服务器之后，如何确保服务器的安全，以及如何正确配置它，我觉得这点很关键；而我今天推荐的这篇文章，就介绍了在购买 Ubuntu ...
