【JS自用案例3-2】创建显示按钮/直接用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);
    }


//触发多次 注意添加JQ库
      $("."+  ClassName ).click(() => {
        console.log("click more Button"+buttonNum + " now");
       });

};


function ClickNoneDisplayByName(para){
  if(para.style.display != "none"){
      para.style.display = "none"
  }else{
      para.style.display = "inline"

  }
}

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

setTimeout(function(){

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

   $(".lamsdivClassValue1").click(() => {
	ClickNoneDisplayByName(document.getElementsByClassName("CLASS_NAME")[0])
	
   });


}, 2000);

方法二 不用创建按钮

直接绑定通用的body

function ClickNoneDisplayByName(para){
  if(para.style.display != "none"){
      para.style.display = "none"
  }else{
      para.style.display = "inline"

  }
}

//原来是个标签都可以绑定，然后就可以click触发
setTimeout(function(){

  document.getElementsByTagName("body")[0].addEventListener('click', function(){

    ClickNoneDisplayByName( document.getElementsByClassName("CLASS_NAME")[0])

  })

 }, 3000);

创建按钮点击跳转链接

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 = "80%";
    ButCre.style.right = "20%";


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


};



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

var targetURL_jwxt = "https://www..com";

setTimeout(function(){

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


    var redirectButton = document.getElementsByClassName("lamsdivClassValue1")[0];

    redirectButton.addEventListener("click", function() {


        // window.location.href = targetURL_jwxt;
        // 新标签打开
           window.open(targetURL_jwxt)

    });

}, 2000);

其他 点击事件模版

套模版直接用 附keycode对照表

setTimeout(function(){

  //点击区域div触发点击，绑定点击事件—————“选中完答案后自动提交，然后会自动会调到下一题”
    document.getElementsByClassName("Py_addpy_New")[0].addEventListener('click', function(){
      document.getElementsByClassName("Btn_blue_1 fl")[1].click()
  })
  
  
 //通过更大范围的div捆绑触发点击—————进而达到“扩大按钮点击的范围”的效果
    document.getElementsByClassName("Py_addpyNr clearfix")[0].addEventListener('click', function(){
      document.getElementsByClassName("Btn_blue_1 fl")[1].click()
  })

  
  //绑定快捷键区域div触发点击
  //judgeeClickSearch(绑定对象,绑定快捷键对应的keycode)
  judgeeClickSearch(document.getElementsByClassName("gradeSet")[0].childNodes[0],"81")  //q
  judgeeClickSearch(document.getElementsByClassName("gradeSet")[1].childNodes[0],"87")  //w
  judgeeClickSearch(document.getElementsByClassName("gradeSet")[2].childNodes[0],"69")  //e
  judgeeClickSearch(document.getElementsByClassName("gradeSet")[3].childNodes[0],"82")  //r

  // judgeeClickSearch(document.getElementsByClassName("Btn_blue_1 fl")[1],"70")  //f


  }, 3000);


function judgeeClickSearch(para, triggerCode){
   document.querySelectorAll("body")[0].addEventListener("keydown",function(event){
    if(event.keyCode == triggerCode){
      para.click()
      console.log("click now")
    }else{
      return
    }
   }

  )
}

图片源自网络，仅供参考。