淄博 網(wǎng)站制作seo網(wǎng)站自動(dòng)發(fā)布外鏈工具
文章目錄
- 1實(shí)現(xiàn)效果
- 2 實(shí)現(xiàn)代碼
湊個(gè)數(shù)，存粹是好玩兒，哈哈...
1實(shí)現(xiàn)效果
最上方一欄：
左側(cè)是顏色按鈕，點(diǎn)擊選中顏色，
中間是功能按鈕，重置顏色、清空畫板、回退、涂改液（填涂色置為白色）
右側(cè)是顯示當(dāng)前所選顏色
下方填涂板是表格實(shí)現(xiàn)的。
2 實(shí)現(xiàn)代碼
<!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">當(dāng)前所選顏色為：<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>