|
|
@@ -0,0 +1,90 @@
|
|
|
+<!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>
|
