js实现填涂画板

文章目录

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

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

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 = "<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/654741.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32 有源蜂鸣器

模块介绍: 结构&#xff1a;有源蜂鸣器通常由一个振膜和一个驱动电路组成。振膜是负责产生声音的部分&#xff0c;而驱动电路则负责控制振荡频率和幅度。 工作原理&#xff1a;有源蜂鸣器的驱动电路会向振膜施加电压&#xff0c;使其振动产生声音。驱动电路可以根据输入信号的…

借助gpt生成ppt:文心一言(chatgpt)、chatppt

提供一种简单的基于gpt快速生成ppt的方式。前置条件&#xff1a; 文心一言chatpptwps/office ppt Step1: 下载chatppt插件 https://chat-ppt.com/invitelinke?share_code47949695&channelchat-ppt.com 注册地址 下载完成后&#xff0c;安装即可&#xff0c;安装完成后…

如何看待开发者是否需要入坑鸿蒙?

前言 自打华为2019年发布鸿蒙操作系统以来&#xff0c;网上各种声音百家争鸣。尤其是2023年发布会公布的鸿蒙4.0宣称不再支持Android&#xff0c;更激烈的讨论随之而来。 通过本文&#xff0c;我将给大家介绍以下几点&#xff0c;让大家清楚的了解到鸿蒙开发的趋势&#xff1…

win11设置mysql开机自启

目录 命令式 1、打开命令提示符或 PowerShell&#xff1a; 2、使用管理员权限运行命令行工具&#xff1a; 3、设置 MySQL 服务为开机自启动&#xff1a; 4、启动 MySQL 服务&#xff1a; 5、 验证设置是否生效&#xff1a; 操作视图式 1、右击任务栏 ---> 选择任务管…

深入了解DRAM和SDRAM:内存带宽的计算与封装形式的奥秘

SSD SDRAM DDR SDRAM简介 动态随机存取存储器DRAM&#xff08;Dynamic Random Access Memory&#xff0c;DRAM&#xff09;是一种半导体存储器。 其主要的作用原理是利用电荷内存储电荷的数量来代表一个二进制比特&#xff08;bit&#xff09;是1还是0。 由于在现实中品体管…

进京证12次不够用怎么办?(北京进京证探头分布,进京证365,进京365)外地车在京如何行驶——躲猫猫外地车在京地图导航

其实想要在北京驾驶外地牌照的车辆主要有两种方式&#xff0c;一种是办理进京证(六环内进京证一年只能办12次&#xff0c;一次有效期7天&#xff0c;所以大多数人是不够用的);另一种就是在非监控区域行驶&#xff0c;可以借助于一些摄像头定位工具&#xff0c;有效躲避摄像头&a…

洗地机哪个牌子好?2024洗地机推荐

洗地机作为一种几乎替代了传统无线吸尘器的清洁工具&#xff0c;近年来在市场上迅速崛起。其优越的清洁效果和智能化设计使其成为许多家庭不可或缺的家电之一。在短短的几年时间里&#xff0c;市场上涌现出了各种各样的品牌和型号&#xff0c;价格也从几百元到数千元不等&#…

LVGL部件

一.标签部件 1.如何创建标签部件以及设置文本 ![2024-01-28T09:54:08.png][3] void my_lvgl(void) {lv_obj_t *lablelv_label_create(lv_scr_act()); //创建一个标签lv_label_set_text(lable,"hello"); //普通更改文字lv_label_set_text_fmt(lab…

有哪些原型图设计工具是你应该熟悉的?

今天我们将介绍 5 优秀的原型设计工具及其功能。每个软件都有不同的平台和价格范围。相信你能找到最适合你的原型工具&#xff01; 1、Sketch 以友好的用户而闻名 Sketch&#xff0c;对于设计师来说&#xff0c;有很多实用的功能。这个软件在图形编辑方面很受欢迎&#xff0c;…

【Django开发】前后端分离美多商城项目:项目准备和搭建(附代码,文档)

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论django商城项目开发相关知识。本项目利用Django框架开发一套前后端不分离的商城项目&#xff08;4.0版本&#xff09;含代码和文档。功能包括前后端不分离&#xff0c;方便SEO。采用Django Jinja2模板引擎 Vue.js实现…

【webrtc】m98 : vs2019 直接构建webrtc及moduletest工程 2

字数有限制,我们继续 【webrtc】m98 : vs2019 直接构建webrtc及unitest工程 1modules_unittests 构建 Build started... 1>------ Build started: Project: modules_unittests, Configuration: GN Win32 ------ 1>ninja: Entering directory `G:\CDN\rtcCli\m98\src\o…

linux centos 查看端口是否打开与打开端口

查看端口是否打开 talnet talnet ip 端口linux查看防火墙开放情况 firewall-cmd --list-all打开端口 其中permanent表示永久生效&#xff0c;public表示作用域&#xff0c;443/tcp表示端口和类型&#xff0c;执行规则的重载 firewall-cmd --zonepublic --add-port443/tcp …

VitePress-04-文档中的表情符号的使用

说明 vitepress 的文档中是支持使用表情符号的&#xff0c;像 &#x1f602; 等常用的表情都是支持的。 本文就来介绍它的使用方式。 使用语法 语法 &#xff1a; :表情名称: 例如 &#xff1a; :joy: &#x1f602; 使用案例代码 # 体会【表情】的基本使用 > hello world …

Netty的高级用法(一)

前言 我们直到在网络通信中客户端和服务端之间除了要传输数据外&#xff0c;还会进行简单的心跳应答通信&#xff0c;使得客户端和服务端的连接处于一种活跃状态&#xff0c;那么客户端可以发送ONE_WAY和TWO_WAY两种方式的处理&#xff0c;而服务端在处理这两种类型的数据时会…

4核16G幻兽帕鲁服务器优惠价格表,阿里云和腾讯云报价

幻兽帕鲁服务器价格多少钱&#xff1f;4核16G服务器Palworld官方推荐配置&#xff0c;阿里云4核16G服务器32元1个月、96元3个月&#xff0c;腾讯云幻兽帕鲁服务器服务器4核16G14M带宽66元一个月、277元3个月&#xff0c;8核32G22M配置115元1个月、345元3个月&#xff0c;16核64…

构建知识图谱:从技术到实战的完整指南

目录 一、概述二、知识图谱的基础理论定义与分类核心组成历史与发展 三、知识获取与预处理数据源选择数据清洗实体识别 四、知识表示方法知识表示模型RDFOWL属性图模型 本体构建关系提取与表示 五、知识图谱构建技术图数据库选择Neo4jArangoDB 构建流程数据预处理实体关系识别图…

matlab窗函数-hann窗和hamming窗函数

窗函数的作用 在时域上&#xff0c;窗函数可以看作是对原始信号进行截断或调制的加权函数。这些窗函数通常在时域上是有限的宽度&#xff0c;并且具有对称性&#xff0c;如矩形窗、汉宁窗、汉明窗和布莱克曼窗等。例如&#xff0c;汉明窗是一种对称窗函数&#xff0c;它可以用…

联想懂的通信×实在智能:共同探索智连融合AI创新发展路径

近日&#xff0c;联想集团副总裁/联想懂的通信CEO王帅、CFO周利军、COO&CPO邢海洋、CGO赵晨、CTO边毅等领导一行莅临杭州实在智能科技有限公司开展研讨座谈。 实在智能创始人&CEO孙林君、联合创始人&COO高扬、联合创始人&CMO张俊九、销售VP&运营商事业线负…

测试开发之路--Flask 之旅 (三):数据库

背景 通过前两次的努力&#xff0c;我们对环境有了增删查改以及部署和查看日志的能力。 现在已经处于将就可用的状态。但其实还差了很重要的东西&#xff0c;就是权限的管理。 因为不能说每个用户上来都能随便的重启和删除环境吧&#xff0c;太容易出事故了。所以我们想起码有…

堆和堆排序【数据结构】

目录 一、堆1. 堆的存储定义2. 初始化堆3. 销毁堆4. 堆的插入向上调整算法 5. 堆的删除向下调整算法 6. 获取堆顶数据7. 获取堆的数据个数8. 堆的判空 二、Gif演示三、 堆排序1. 堆排序(1) 建大堆(2) 排序 2.Topk问题 四、完整代码1.堆的代码Heap.cHeap.htest.c 2. 堆排序的代码…