WordPress网站一键复制JS代码教程
时间：2023-12-27 12:50:35 栏目：教程学院
【导读】：起點源站(6012.cn)在线提供,教程学院「2把火烧过之后 供应链谁能存活？」，供教程学院爱好者免费阅读。本文地址：http://www.55ou.com/news/1527.html
WordPress网站添加一键复制指定内容，方法其实很简单，给大家分享一个通过JS代码实现一键复制指定内容的教程。
第一步：JS文件下载
clipboard.js 是一个 Github 上的开源项目，可以实现纯 JavaScript 的浏览器内容复制到系统剪贴板的功能！
第二步：引用JS与CSS文件
CSS代码：
- .red_tkl {
- color: #faddde;
- 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;
- }
将下载的 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>
第三步：使用教程
JS与CSS文件引用之后，在文章中的某个需要复制的地方放一个按钮就可以了，代码如下：
- <button class="itemCopy red_tkl button_tkl" id="TKLS" type="button" data-clipboard-text="需要复制的内容">一键复制</button>
版权声明：
1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。
2、本站仅提供信息发布平台，不承担相关法律责任。
3、若侵犯您的版权或隐私，请联系本站管理员删除。
4、、文章来源：http://www.55ou.com/news/1527.html
