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,一经查实,立即删除!

相关文章

【iOS ARKit】光照估计

光照估计 AR与VR 在光照上最大的不同在于VR 世界是纯数字世界&#xff0c;有一套完整的数学模型&#xff0c;而AR则是将计算机生成的虚拟物体或关于真实物体的非几何信息叠加到真实世界的场景之上实现对真实世界的增强&#xff0c;融合了真实世界与数字世界。就光照而言&#x…

uniapp - editor 富文本的使用

目录 editor 组件 属性说明 editorContext uni.createSelectorQuery() SelectorQuery selectorQuery.in(component) selectorQuery.select(selector) selectorQuery.selectAll(selector) selectorQuery.selectViewport() selectorQuery.exec(callback) NodesRef nod…

STM32 有源蜂鸣器

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

ChatGPT升级,价格降低,不再懒惰!

OpenAI 1月26号宣布推出5种新模型&#xff0c;包括两款新的嵌入式模型、更新后的 GPT-4 Turbo 预览模型、GPT-3.5 Turbo 模型以及文本审核模型。 此外&#xff0c;chatgpt的价格也有低至50%的下降。新模型的输入价格下降 50% 至 $0.0005 /1K tokens&#xff0c;输出价格下降 2…

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

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

MyBatis框架-XML映射器

文章目录 XML映射器CRUD操作select根据id查询用户根据名字和密码查询方法一&#xff1a;使用对象UserMapper.javaUserMapper.xml测试用例方法二&#xff1a;使用MapUserMapper.javaUserMapper.xml测试用例方法三&#xff1a;方法种传递参数UserMapper.javaUserMapper.xml测试用…

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

前言 自打华为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。 由于在现实中品体管…

【物联网之·协议·ZigBee】

系列文章目录 文章目录 前言一、ZigBee技术概述1.1 ZigBee的起源和发展历程1.2 ZigBee的工作原理和网络拓扑结构1.3 ZigBee的应用领域和主要优势 二、ZigBee协议栈2.1 Zigbee的协议栈结构和各层功能2.2 Zigbee协议栈的协议消息和数据格式 三、ZigBee网络配置3.1 Zigbee网络的组…

嵌⼊式⾯试宝典

编程功底问题 1. 简单描述下C语⾔中⼤⼩端的概念 ⼤⼩端是⼀种计算机存储数据的⽅式,它决定了在内存中如何排列多字节数据的字节顺序。 ⼤端:多字节数据的⾼位字节存储在内存的低地址处。 ⼩端:多字节数据的低位字节存储在内存的低地址处。 8051 stc单⽚机是⼩端模式 …

进京证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…

【C语言】(9)分支结构

一.if-else 语句 if-else 适用于简单和复杂的条件判断。 a. 基本 if 语句 用途&#xff1a;基本的条件测试。语法&#xff1a;if (condition) {// 代码块 }示例&#xff1a;if (score > 60) {printf("及格\n"); }b. if-else 语句 用途&#xff1a;二选一的条件…

基础小白快速学习c语言 ---c语言的简单介绍

c语言是由一个或者多个函数组成的&#xff0c;函数是由语句组成的&#xff0c;语句要用&#xff1b;结束 c语言开发过程&#xff1a; 1 创建一个源程序 2 预处理并且编程 c语言中的标准输入和标准输出 标准输出&#xff1a;printf printf是c语言标准库中提供的一个函数&…

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

今天我们将介绍 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 …