WordPress网站轻松实现一键复制淘口令

2022年10月25日20:00:00 发表评论

双十一快来了快开始了,一些返利APP上可以一键复制淘口令按钮,其实WordPress网站也能轻松实现一键复制淘口令。

效果图:

WordPress网站轻松实现一键复制淘口令

代码部署:

第一步:下载JS文件

clipboard.js 是一个 Github 上的开源项目,可以实现纯 JavaScript 的浏览器内容复制到系统剪贴板的功能!

 

第二步:引用JS文件

将下载的 clipboard.min.js 上传到网站根目录,在 WordPress 的 footer.php 的末尾添加如下代码:

 
  1. <script src="/clipboard.min.js" type="text/javascript"></script>  
  2. <script>  
  3. var clipboard = new Clipboard('.itemCopy');  
  4. clipboard.on('success',  
  5. function(e) {  
  6.     if (e.trigger.disabled == false || e.trigger.disabled == undefined) {  
  7.         e.trigger.innerHTML = "复制成功";  
  8.         e.trigger.disabled = true;  
  9.         setTimeout(function() {  
  10.             e.trigger.innerHTML = "一键复制";  
  11.             e.trigger.disabled = false;  
  12.         },  
  13.         2000);  
  14.     }  
  15. });  
  16. clipboard.on('error',  
  17. function(e) {  
  18.     e.trigger.innerHTML = "复制失败";  
  19. });  
  20. </script>  

CSS美化代码:

  1. .red_tkl {  
  2.     color: #faddde;  
  3.     border: solid 1px #980c10;  
  4.     background: #d81b21;  
  5.     background: -webkit-gradient(linear, left top, left bottombottom, from(#ed1c24), to(#aa1317));  
  6.     background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);  
  7.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');  
  8. }  
  9. .red_tkl:hover {  
  10.     background: #b61318;  
  11.     background: -webkit-gradient(linear, left top, left bottombottom, from(#c9151b), to(#a11115));  
  12.     background: -moz-linear-gradient(top,  #c9151b,  #a11115);  
  13.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');  
  14. }  
  15. .red_tkl:active {  
  16.     color: #de898c;  
  17.     background: -webkit-gradient(linear, left top, left bottombottom, from(#aa1317), to(#ed1c24));  
  18.     background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);  
  19.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');  
  20. }  
  21. .button_tkl {  
  22.     display: inline-block;  
  23.     *display: inline;  
  24.     vertical-align: baselinebaseline;  
  25.     margin: 0 2px;  
  26.     outline: none;  
  27.     cursor: pointer;  
  28.     text-align: center;  
  29.     text-decoration: none;  
  30.     font: 14px/100% Arial, Helvetica, sans-serif;  
  31.     padding: .5em 2em .55em;  
  32.     text-shadow: 0 1px 1px rgba(0,0,0,.3);  
  33.     -webkit-border-radius: .5em;  
  34.     -moz-border-radius: .5em;  
  35.     border-radius: .5em;  
  36.     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);  
  37.     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);  
  38.     box-shadow: 0 1px 2px rgba(0,0,0,.2);  
  39. }  
  40. .button_tkl:hover {  
  41.     text-decoration: none;  
  42. }  
  43. .button_tkl:active {  
  44.     position: relative;  
  45.     top: 1px;  
  46. }  

第三步:使用教程

JS与CSS文件引用之后,在文章中的某个需要复制的地方放一个按钮就可以了,代码如下:

 
  1. <button class="itemCopy red_tkl button_tkl" id="TKLS"  type="button" data-clipboard-text="需要复制的内容">一键复制</button>  
Tips:

做副业长期赚不到钱的话很容易放弃,特别是对于新手来说,新手刚入行的时候期望值都比较高,以为进来就马上能赚到钱,但是现实却很残酷,很多新手都没能坚持到赚钱的时候。因此,我在朋友圈《加微信》会给大家推荐一些破零项目,钱虽然不多,但是我觉得能让很多新手做副业的信心不那么容易被打垮。

掘金网
  • 版权声明:本站原创文章,转载请保留出处和链接!
  • 本文链接:http://jjsoho.com/wpyjfz/ 网赚有风险,投资需谨慎!