123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Document</title>
- </head>
- <body>
- <div>
- <input type="number" id="number1" />
- <input type="number" id="number2" />
- <button id="calc">Посчитать</button>
- <input type="text" name="" id="result" />
- </div>
- <script>
- // -------------------Таблица умножения, Подсветить ячейку, Подсветить строку и столбец
- let table = document.createElement("table");
- document.body.append(table);
- for (let i = 1; i < 10; i++) {
- let tr = document.createElement("tr");
- table.append(tr);
- tr.style.border = "1px solid black";
- for (let a = 1; a < 10; a++) {
- let td = document.createElement("td");
- tr.append(td);
- td.innerText = i * a;
- td.style.border = "2px solid black";
- td.style.padding = "10px";
- td.style.margin = "0px";
- }
- }
- let tdarr = document.querySelectorAll("td");
- tdarr.forEach(
- (tdOn) =>
- (tdOn.onmousemove = function () {
- this.style.backgroundColor = "cyan";
- this.parentElement.style.backgroundColor = "cyan";
- let index = this.cellIndex;
- let column = document.querySelectorAll("tr");
- column.forEach(
- (columns) =>
- (columns.children[index].style.backgroundColor =
- "cyan")
- );
- })
- );
- tdarr.forEach(
- (tdOut) =>
- (tdOut.onmouseout = function () {
- this.style.backgroundColor = "transparent";
- this.parentElement.style.backgroundColor =
- "transparent";
- let index = this.cellIndex;
- let column = document.querySelectorAll("tr");
- column.forEach(
- (columns) =>
- (columns.children[index].style.backgroundColor =
- "transparent")
- );
- })
- );
- // ------------------------ Calc
- let number1 = document.getElementById("number1");
- let number2 = document.getElementById("number2");
- calc.onclick = function () {
- alert(+number1.value + +number2.value);
- };
- // ------------------------ Calc Live
- function calc() {
- result.value = +number1.value + +number2.value;
- }
- number1.oninput = calc;
- number2.oninput = calc;
-
- </script>
- </body>
- </html>
|