js编辑随机小方块

如何点击按钮增删切改随机颜色 随机位置小方块;
话不多说 直接上代码

  var buttons,prev,clone;

  init();
  function init() {
    buttons = document.querySelectorAll("button");
    buttons.forEach(function (item) {
      item.onclick = clickHandler;
    });
  }

  function clickHandler() {
    switch (this.textContent) {
      case "新增":
          createBlock();
        break;
      case "删除":
          removeBlock();
        break;
      case "复制":
          cloneBlock();
        break;
      case "剪切":
          cutBlock();
        break;
      case "粘贴":
          pasteBlock();
        break;
    }
  }

  function createBlock(){
      var div=document.createElement("div");
      Object.assign(div.style,{
          width:"50px",
          height:"50px",
          backgroundColor:Utils.getRandomColor(),
          position:"absolute",
          left:Utils.randomNum(0,1200)+"px",//调用random随机函数确定元素位置
          top:Utils.randomNum(0,600)+"px",
      });
      div.onclick=selectBlock;
      selectBlock(div);
      document.body.appendChild(div);
  }

  function removeBlock(){
       if(!prev) return;
        var elem=prev;
       if(prev.previousElementSibling && prev.previousElementSibling.constructor===HTMLDivElement) selectBlock(prev.previousElementSibling);
       else if(prev.nextElementSibling && prev.nextElementSibling.constructor===HTMLDivElement) selectBlock(prev.nextElementSibling);
       elem.remove();
  }

  function cloneBlock(){
      if(!prev) return;
      clone=prev.cloneNode(false);

  }

  function cutBlock(){
     cloneBlock();
     removeBlock();
  }

  function pasteBlock(){
      if(!clone) return;
      Object.assign(clone.style,{
          left:Utils.randomNum(0,1200)+"px",
          top:Utils.randomNum(0,600)+"px"
        })
      document.body.appendChild(clone);
      selectBlock(clone);
      clone=null;
  }

  function selectBlock(){
      if(prev){
          prev.style.border="none";
          prev=null;
      }


      prev=(arguments[0].constructor===HTMLDivElement ? arguments[0] : this);
      console.log(prev);


      prev.style.border="2px solid #000000";
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值