dedal.qq/happy_lights
1
0
Fork 0
forked from chubby/happy_lights
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

merge into: dedal.qq:master
Branches Tags
dedal.qq:master
chubby:master
...
pull from: chubby:master
Branches Tags
chubby:master
dedal.qq:master

4 Commits
master ... master

Author SHA1 Message Date
chubby
4413632716 height,width,save btn 2021-11-29 17:21:44 +03:00
chubby
83abbc6023 color btn's 2021-11-22 17:43:54 +03:00
chubby
e3fcbb18b4 add btn's 2021-11-22 17:42:32 +03:00
chubby
0fb1bca57b Merge pull request 'Update 'index.html'' (#1) from dedal.qq/happy_lights:master into master 
Reviewed-on: chubby/happy_lights#1
 2021-11-21 12:16:57 +03:00
2 changed files with 160 additions and 16 deletions
Show Stats Expand all files Collapse all files

84
index.html
View File

@ -10,22 +10,24 @@
background-color: rgb(223, 223, 223); background-color: rgb(223, 223, 223);
} }
.table td{ td {
padding: 10px; padding: 10px;
border: 1px solid black; border: 1px solid black;
background-color: white; background-color: white;
} }
.input{ .input{
float: left;
margin: 15px; margin: 15px;
} }
.btn { .btn {
display: inline-block; float: left;
padding: 10px; padding: 10px;
background-color: rgb(253, 253, 250); background-color: rgb(253, 253, 250);
border: 2px solid rgb(247, 247, 153); border: 2px solid rgb(196, 195, 195);
border-radius: 4px; border-radius: 4px;
height: 55px;
} }
.btn:hover{ .btn:hover{
@ -33,26 +35,88 @@
} }
.container { .container {
display: flex; float: left;
margin: 10px; 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> </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> </head>
<body> <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> <table class="table" id="qq"></table>
<div class="container"> <div class = "main">
container
<input class = "input" type="color" id="palitra"> <input class = "input" type="color" id="palitra">
<button class="btn">Кнопка</button>
<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>
<div id="add_div"></div>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
</html> </html>

88
main.js
View File

@ -3,9 +3,19 @@ let elem = document.getElementById('qq');
let a_click = false 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){ function createTable (parent, cols, rows){
let table = document.createElement('table') console.log(rows,cols)
while ( parent.firstChild){
parent.firstChild.remove()
}
document.onmousedown = function(){ document.onmousedown = function(){
a_click = true a_click = true
} }
@ -16,6 +26,7 @@ document.onmouseup = function(){
let palitra = document.getElementById('palitra'); let palitra = document.getElementById('palitra');
for ( i=0; i<rows; i++){ for ( i=0; i<rows; i++){
let tr=document.createElement('tr') let tr=document.createElement('tr')
@ -36,9 +47,78 @@ let palitra = document.getElementById('palitra');
tr.append(td) 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
}