本文介绍: 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 = "<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>
原文地址:https://blog.csdn.net/m0_58730471/article/details/135839361
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_64401.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。