如何点击按钮增删切改随机颜色 随机位置小方块;
话不多说 直接上代码
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";
}