js实现填涂画板

文章目录

凑个数,存粹是好玩儿,哈哈...

1实现效果

最上方一栏:

左侧是颜色按钮,点击选中颜色,

中间是功能按钮,重置颜色、清空画板、回退、涂改液(填涂色置为白色)

右侧是显示当前所选颜色
下方填涂板是表格实现的。

2 实现代码

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画图板</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #bt {
            display: flex;
            margin-top: 5px;
            height: 30px;
            box-sizing: border-box;
        }

        .bt1 {
            padding-left: 20px;
            flex: 1;
            box-sizing: border-box;
        }

        .bt2 {
            flex: 1;
            text-align: center;
        }

        .bt3 {
            flex: 1;
            font-size: 20px;
        }

        #content {
            margin-top: 10px;
        }

        table {
            border-collapse: collapse;
        }

        td {
            width: 25px;
            height: 25px;
            border: 0.5px solid gray;
        }

        td:hover {
            background-color: gray;
        }

        .b1 {
            margin-left: 10px;
            width: 15px;
            height: 15px;
        }

        .b2 {
            margin-right: 10px;
            width: 100px;
            line-height: 27px;
            background-color: lightgray;
            border: none;
            border-radius: 10px;
        }

        .b1:hover {
            width: 20px;
            height: 20px;
        }

        .b2:hover {
            background-color: lightblue;
        }

        #colorName {
            display: inline-block;
            color: red;
            width: 200px;
            height: 30px;
            text-align: center;
            background-color: gray;
        }
    </style>
</head>

<body>
    <div id="bt">
        <div class="bt1">
        </div>
        <div class="bt2">
            <button class="b2">重置颜色</button>
            <button class="b2">清空画板</button>
            <button class="b2">后退一步</button>
            <button class="b2">涂改液</button>
        </div>
        <div class="bt3">
            当前所选颜色为:<span id="colorName">rgb(255,0,0)</span>
        </div>
    </div>

    <div id="content">

    </div>
    <script>
        // 存放改变颜色的td索引
        let bakeTable = [];
        let div = document.getElementById('content');
        let width = 60;
        let height = 25;
        // 初始化颜色按钮
        createColorTable();
        // 打印画板
        let str = "<table>"
        for (let i = 0; i < height; i++) {
            str += "<tr>"
            for (let j = 0; j < width; j++) {
                str += "<td></td>";
            }
            str += '</tr>';
        }
        str += "</table>"
        div.innerHTML = str;
        // 给td加事件
        let tds = document.querySelectorAll("td");
        tds.forEach((td,i) => {
            td.onclick = setColor.bind(td,null,i);
        });
        // 获取功能按钮
        let buts_2 = document.querySelectorAll('.b2');
        // 获取颜色名称
        let tdColorName = document.querySelector("#colorName");
        // 初始化颜色
        let butColor = 'rgb(255,0,0)';

        // 按钮功能
        buts_2[0].onclick = createColorTable;
        buts_2[1].onclick = clearCanvas;
        buts_2[2].onclick = backStep;
        buts_2[3].onclick = function(){
            butColor = 'rgb(255, 255, 255)';
            tdColorName.innerHTML = butColor;
            tdColorName.style.color = butColor;
        };

        function getColor(but) {
            but = this;
            butColor = but.style.backgroundColor;
            tdColorName.innerHTML = butColor;
            tdColorName.style.color = butColor;
        }
        

        function setColor(td,i) {
            td = this;
            td.style.backgroundColor = butColor;
            bakeTable.push(i);
        }

        function randomColor() {
            let color = "#";
            let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
            for (let i = 0; i < 6; i++) {
                let index = parseInt(Math.random() * arr.length);
                color += arr[index];
            }
            return color;
        }

        function createColorTable() {
            let btn_str = '';
            for (let i = 0; i < 15; i++) {
                btn_str += '<button class="b1" style="background-color: ' + randomColor() + '"></button>';
            }
            document.querySelector('.bt1').innerHTML = btn_str;
            let buts = document.querySelectorAll('.b1');
            buts.forEach(but => {
                but.onclick = getColor;
            })
        }
        function clearCanvas(){
            document.querySelectorAll("td").forEach(td=>{
                td.style.backgroundColor = "";
            })
        }
        function backStep(){
            if(bakeTable.length>0){
                let i = bakeTable.pop();
                document.querySelectorAll("td")[i].style.backgroundColor = "";
            }
        }
    </script>
</body>

</html>
相关推荐
CodeSheep17 分钟前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅21 分钟前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒1 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel10 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼11 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku15 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css