js原生我不太懂,可能写的比较垃圾,主要是想解决禁止拖拽和批量绑定事件,以及生成页面元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画画</title>
</head>
<style>
#box{
float: left;
border: 1px solid black;
}
.cell{
background: pink;
5px;
height: 5px;
float: left;
}
.cell_c{
clear:left;
}
</style>
<body>
<div id="box" onmouseup="end_hua()" onmousedown="start_hua()"></div>
<script>
let height = 100;
let width = 100;
let kaiguan = 0;
for(var i=0;i<height;i++){
for(var j=0;j<width;j++){
let d = document.createElement("div");
d.ondragstart = function(){return false;};//禁用拖拽
d.onmousemove = function(){hua(d)};
d.className = "cell";
if(j==0){
d.className = "cell cell_c";
}
document.getElementById("box").appendChild(d);
}
}
function start_hua(){
kaiguan = 1;
console.log("开始")
}
function end_hua(){
kaiguan = 0;
console.log("结束")
}
function hua(e){
if(kaiguan==1){
e.style.backgroundColor="black"
}
// console.log()
}
</script>
</body>
</html>