forked from chubby/happy_lights
Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4413632716 | |||
| 83abbc6023 | |||
| e3fcbb18b4 | |||
| 0fb1bca57b |
88
index.html
88
index.html
@ -10,22 +10,24 @@
|
||||
background-color: rgb(223, 223, 223);
|
||||
}
|
||||
|
||||
.table td{
|
||||
td {
|
||||
padding: 10px;
|
||||
border: 1px solid black;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.input{
|
||||
float: left;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 10px;
|
||||
background-color: rgb(253, 253, 250);
|
||||
border: 2px solid rgb(247, 247, 153);
|
||||
border: 2px solid rgb(196, 195, 195);
|
||||
border-radius: 4px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.btn:hover{
|
||||
@ -33,25 +35,87 @@
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
padding-top: 15px;
|
||||
width: 400px;
|
||||
|
||||
}
|
||||
|
||||
.color_element {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
float: left;
|
||||
margin: 0px 5px;
|
||||
width: 50px;
|
||||
|
||||
border-radius: 2px;
|
||||
}
|
||||
.color_button{
|
||||
|
||||
width: 50px;
|
||||
height: 27px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.del_btn{
|
||||
|
||||
height: 27px;
|
||||
background-color: white;
|
||||
border: none;
|
||||
}
|
||||
.icon {
|
||||
font-size:30px;
|
||||
}
|
||||
.main {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.del{
|
||||
opacity: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
.del:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
.HW{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.HW:focus {
|
||||
background-color: #e4f0f5;
|
||||
}
|
||||
.save_btn{
|
||||
margin: 15px;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.save_btn:hover{
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
|
||||
-->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<input type="number" class="HW" id="H" oninput= "q()" value="20">
|
||||
<input type="number" class="HW" id="W" oninput= "q()" value="20">
|
||||
<button class="save_btn ">Сохранить</button>
|
||||
<table class="table" id="qq"></table>
|
||||
<div class="container">
|
||||
container
|
||||
<input class = "input" type="color" id="palitra">
|
||||
<button class="btn">Кнопка</button>
|
||||
<div class = "main">
|
||||
|
||||
<input class = "input" type="color" id="palitra">
|
||||
|
||||
<button class="btn" onclick="add_color()" id="btn"><i class="bi bi-plus-circle icon"></i></button>
|
||||
<div class="container" id="container"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="add_div"></div>
|
||||
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
|
||||
88
main.js
88
main.js
@ -3,9 +3,19 @@ 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){
|
||||
let table = document.createElement('table')
|
||||
console.log(rows,cols)
|
||||
while ( parent.firstChild){
|
||||
parent.firstChild.remove()
|
||||
}
|
||||
document.onmousedown = function(){
|
||||
a_click = true
|
||||
}
|
||||
@ -16,6 +26,7 @@ document.onmouseup = function(){
|
||||
let palitra = document.getElementById('palitra');
|
||||
|
||||
for ( i=0; i<rows; i++){
|
||||
|
||||
let tr=document.createElement('tr')
|
||||
|
||||
|
||||
@ -36,9 +47,78 @@ let palitra = document.getElementById('palitra');
|
||||
|
||||
tr.append(td)
|
||||
}
|
||||
table.append(tr)
|
||||
parent.append(tr)
|
||||
}
|
||||
parent.append(table)
|
||||
|
||||
|
||||
}
|
||||
|
||||
createTable (elem, 20, 20)
|
||||
|
||||
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user