js实现填涂画板

文章目录

  • 1实现效果
  • 2 实现代码

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

1实现效果

js实现填涂画板_第1张图片

最上方一栏:
左侧是颜色按钮,点击选中颜色,
中间是功能按钮,重置颜色、清空画板、回退、涂改液(填涂色置为白色)
右侧是显示当前所选颜色

下方填涂板是表格实现的。

2 实现代码

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 = ""for(let i =0; i < height; i++){
            str +=""for(let j =0; j < width; j++){
                str +="";}
            str +='';}
        str +="
"
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 += ''; } 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>

你可能感兴趣的:(前端三件套,javascript,前端,css)