JavaScript 制作简单画板

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>

　　

posted @ 2020-02-23 21:41  西瓜霜  阅读(308)  评论(0)  编辑  收藏  举报