125 lines
2.4 KiB
JavaScript
125 lines
2.4 KiB
JavaScript
|
|
let elem = document.getElementById('qq');
|
|
|
|
let a_click = false
|
|
|
|
function q(){
|
|
let H = document.getElementById("H").value
|
|
let W = document.getElementById("W").value
|
|
|
|
createTable (elem, H , W)
|
|
}
|
|
q()
|
|
|
|
function createTable (parent, cols, rows){
|
|
console.log(rows,cols)
|
|
while ( parent.firstChild){
|
|
parent.firstChild.remove()
|
|
}
|
|
document.onmousedown = function(){
|
|
a_click = true
|
|
}
|
|
|
|
document.onmouseup = function(){
|
|
a_click = false
|
|
}
|
|
let palitra = document.getElementById('palitra');
|
|
|
|
for ( i=0; i<rows; i++){
|
|
|
|
let tr=document.createElement('tr')
|
|
|
|
|
|
for (j=0; j<cols; j++){
|
|
|
|
let td = document.createElement('td')
|
|
td.onmouseover = function(){
|
|
if (a_click){
|
|
|
|
td.style.backgroundColor = palitra.value
|
|
}
|
|
|
|
|
|
}
|
|
td.onclick = function(){
|
|
td.style.backgroundColor = palitra.value
|
|
}
|
|
|
|
tr.append(td)
|
|
}
|
|
parent.append(tr)
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function add_color(){
|
|
|
|
let d = element("div")
|
|
|
|
d.classList.add("color_element")
|
|
|
|
let btn = element("button")
|
|
|
|
btn.classList.add("color_button")
|
|
btn.style.backgroundColor = palitra.value
|
|
|
|
|
|
let c = document.getElementById("container")
|
|
|
|
d.append(btn)
|
|
c.append(d)
|
|
console.log(palitra.value)
|
|
|
|
btn.onclick = function(){
|
|
palitra.value = rgbToHex(btn.style.backgroundColor)
|
|
console.log(rgbToHex(btn.style.backgroundColor))
|
|
}
|
|
|
|
if (c.children.length==24) {
|
|
document.getElementById("btn").disabled = true
|
|
}
|
|
let del = element("button")
|
|
|
|
del.classList.add("del_btn")
|
|
d.append(del)
|
|
|
|
|
|
let i = element("i")
|
|
|
|
i.classList.add("bi","bi-x-circle", "del")
|
|
del.append(i)
|
|
|
|
del.onclick=function(){
|
|
d.remove()
|
|
document.getElementById("btn").disabled = false
|
|
}
|
|
|
|
}
|
|
|
|
function element(a){
|
|
return document.createElement(a)
|
|
}
|
|
|
|
function rgbToHex(col)
|
|
{
|
|
if(col.charAt(0)=='r')
|
|
{
|
|
col=col.replace('rgb(','').replace(')','').split(',');
|
|
var r=parseInt(col[0], 10).toString(16);
|
|
var g=parseInt(col[1], 10).toString(16);
|
|
var b=parseInt(col[2], 10).toString(16);
|
|
r=r.length==1?'0'+r:r; g=g.length==1?'0'+g:g; b=b.length==1?'0'+b:b;
|
|
var colHex='#'+r+g+b;
|
|
return colHex;
|
|
}
|
|
}
|
|
|
|
function picture(){
|
|
let d = element("div")
|
|
document.getElementById("add_div").append.d
|
|
}
|