【JS自用案例3-1】创建复制按钮

心血来潮，想弄个按钮，来控制页面部分组件的显示，另一种简单粗暴的方法就是绑定页面的body来控制
其实这个实用意义还是不大的，主要还是通过个鸡肋需求来学习JS一些知识。

// @require      http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js
//============================添加以上库============================

var eleAppeend = document.getElementsByTagName("body")[0]

//区别于函数，用了钩子和const类型
const lamsButton = (buttonNum = "1", para = eleAppeend) => {
    var ButCre = document.createElement("button");

    //添加Class属性，一般用不上，除非回调自己的div
    var divClass = document.createAttribute("class");
    var ClassName = "lamsdivClassValue"+buttonNum
    divClass.value = ClassName;
    ButCre.setAttributeNode(divClass);


	  ButCre.innerHTML = "我就是按钮 【"+ buttonNum +"】 ！怎么啦！";

//为div添加样式 简洁大方为主，调字体大小、div高度
    var style = document.createAttribute("style");
    ButCre.setAttributeNode(style);


    ButCre.style.height = "40px";
    ButCre.style.width = "75px";
    ButCre.style.background = "#4662d9";
    //粉红
    //ButCre.style.background = "rgb(237, 79, 121)";

    ButCre.style.borderRadius = "20px"

    ButCre.style.color = "#fff"
    ButCre.style.border = "2px"
    ButCre.style.solid = "#73A6F8"
    ButCre.style.fontWeight = "bold"
    
    ButCre.style.cursor="pointer"
    ButCre.style.marginLeft = "10px"

//如果想固定按钮一直悬浮页面，添加以下style即可
    ButCre.style.position = "fixed";
    ButCre.style.bottom = "50%";
    ButCre.style.right = "10px";


// 为创建的标签ButCre找一个爸爸贴贴，也就是设置标签的位置
    if(para){
        para.appendChild(ButCre);
    }


//点击按钮需要触发的函数，有两种绑定方式
    //但这种方式只能触发一次
    ButCre.onclick = console.log("click Button"+buttonNum + " now");
//注意添加JQ库
    // $的方式可以触发多次
      $("."+  ClassName ).click(() => {
        console.log("click more Button"+buttonNum + " now");
       });

};



// 方法一：
function Copyy(valueCopy="None") {
         // var input = document.getElementsByTagName("button")[0];
         // input.select();
         // 为什么不行呢？因为button对象不是input对象，没有select函数

        const input = document.createElement('input');
        document.body.appendChild(input);
        input.setAttribute('value', valueCopy);
        input.select();

        booll = document.execCommand("Copy");
        console.log("success ????")
        console.log(booll)
        //用完就可以清理一下
        document.body.removeChild(input);
     }

// 方法二：

// @require      https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.min.js
// 需要库
function Ccopy(trigger,tarText ) {

    var clipboard = new ClipboardJS(trigger, {
    text: function () {
    return tarText;

    }

  });

    clipboard.on("success", function (e) {
      console.log("success", e);
      alert("successfully copied");
      e.clearSelection();
      clipboard.destroy();
    });

    clipboard.on("error", function (e) {
      console.log("error", e);
      clipboard.destroy();

    });

}

 //judgeeCopyWithTime(document.getElementsByClassName("headline")[0])

function judgeeCopyWithTime(para){
	// 技巧积累：利用时间作为编号，以“标题+编号”为每张图片准备不同的名字复制用
    const Mits =  new Date().getMinutes()
    const Secs =  new Date().getSeconds()

    if(para){
        Copyy( para.innerText+ Mits.toString() + Secs.toString() )
    }else{
    console.log("找不到CLASS类，请重新添加para")
    }
}




//修改并替换
var eleAppeend1 = document.getElementsByTagName("body")[0]

setTimeout(function(){

    //创建1号按钮、2号按钮
    lamsButton("1",para = eleAppeend);

   $(".lamsdivClassValue1").click(() => {
   
//按理说这种方式也可以，但是我不知道为什么不行，多次触发只能Jq
//document.getElementsByClassName("lamsdivClassValue1")[0].click(() => {

    console.log("copy now")
    Copyy('听说你想复制我!!')

      // 方法二：
      // 不需要使用$为按钮1绑定函数，但也是只能触发一次copy
      // Ccopy(".lamsdivClassValue2" ,"听说你还想复制我??");


}, 2000);

其他

动态点击复制，哪里不会点哪里，参考本栏目
【JS自用案例6】