标签:border meta 生成 asc viewport charset 画板 fun round
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; width: 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>
标签:border meta 生成 asc viewport charset 画板 fun round
原文地址:https://www.cnblogs.com/zonglonglong/p/12354494.html