码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript 制作简单画板

时间:2020-02-23 21:55:18      阅读:93      评论:0      收藏:0      [点我收藏+]

标签: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>

  

JavaScript 制作简单画板

标签:border   meta   生成   asc   viewport   charset   画板   fun   round   

原文地址:https://www.cnblogs.com/zonglonglong/p/12354494.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!