域名备案以后怎么建设网站,智能写作网站,微商城登录,做宣传图册在什么网站文章目录 1实现效果2 实现代码 凑个数#xff0c;存粹是好玩儿#xff0c;哈哈... 1实现效果 最上方一栏#xff1a; 左侧是颜色按钮#xff0c;点击选中颜色#xff0c; 中间是功能按钮#xff0c;重置颜色、清空画板、回退、涂改液#xff08;填涂色置为白色#xff… 文章目录 1实现效果2 实现代码 凑个数存粹是好玩儿哈哈... 1实现效果 最上方一栏 左侧是颜色按钮点击选中颜色 中间是功能按钮重置颜色、清空画板、回退、涂改液填涂色置为白色 右侧是显示当前所选颜色 下方填涂板是表格实现的。 2 实现代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title画图板/titlestyle* {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
/headbodydiv idbtdiv classbt1/divdiv classbt2button classb2重置颜色/buttonbutton classb2清空画板/buttonbutton classb2后退一步/buttonbutton classb2涂改液/button/divdiv classbt3当前所选颜色为span idcolorNamergb(255,0,0)/span/div/divdiv idcontent/divscript// 存放改变颜色的td索引let bakeTable [];let div document.getElementById(content);let width 60;let height 25;// 初始化颜色按钮createColorTable();// 打印画板let str tablefor (let i 0; i height; i) {str trfor (let j 0; j width; j) {str td/td;}str /tr;}str /tablediv.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 classb1 stylebackground-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.length0){let i bakeTable.pop();document.querySelectorAll(td)[i].style.backgroundColor ;}}/script
/body/html
