forked from chubby/happy_lights
height,width,save btn
This commit is contained in:
parent
83abbc6023
commit
4413632716
20
index.html
20
index.html
@ -78,6 +78,20 @@
|
|||||||
.del:hover{
|
.del:hover{
|
||||||
opacity: 1;
|
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"> -->
|
||||||
@ -87,6 +101,9 @@
|
|||||||
|
|
||||||
</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 = "main">
|
<div class = "main">
|
||||||
|
|
||||||
@ -94,8 +111,11 @@
|
|||||||
|
|
||||||
<button class="btn" onclick="add_color()" id="btn"><i class="bi bi-plus-circle icon"></i></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 class="container" id="container"></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="add_div"></div>
|
||||||
|
|
||||||
|
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
21
main.js
21
main.js
@ -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){
|
||||||
|
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')
|
||||||
|
|
||||||
|
|
||||||
@ -39,9 +50,11 @@ let palitra = document.getElementById('palitra');
|
|||||||
parent.append(tr)
|
parent.append(tr)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
createTable (elem, 20, 20)
|
|
||||||
|
|
||||||
|
|
||||||
function add_color(){
|
function add_color(){
|
||||||
|
|
||||||
@ -105,3 +118,7 @@ function rgbToHex(col)
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function picture(){
|
||||||
|
let d = element("div")
|
||||||
|
document.getElementById("add_div").append.d
|
||||||
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user