|
@@ -0,0 +1,86 @@
|
|
|
|
|
+<!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="numberOne">
|
|
|
|
|
+ <input type="number" id="numberTwo">
|
|
|
|
|
+ <button id="calc">Рассчитать</button>
|
|
|
|
|
+ <input type="text" value=" " id="result">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <script>
|
|
|
|
|
+ //Таблица умножения
|
|
|
|
|
+ const table = document.createElement('table');
|
|
|
|
|
+ document.body.append(table);
|
|
|
|
|
+
|
|
|
|
|
+ for (let i = 1; i < 10; i++) {
|
|
|
|
|
+ let tr = document.createElement('tr')
|
|
|
|
|
+ table.append(tr)
|
|
|
|
|
+
|
|
|
|
|
+ for (let a = 1; a < 10; a++) {
|
|
|
|
|
+ let td = document.createElement("td");
|
|
|
|
|
+ tr.append(td);
|
|
|
|
|
+ td.innerText = i * a;
|
|
|
|
|
+ td.style.border = "1px solid black";
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ //Подсветить ячейку
|
|
|
|
|
+ // let tdarr = [...table.querySelectorAll('td')]
|
|
|
|
|
+ // tdarr.forEach(tdOn => tdOn.onmousemove = function () {
|
|
|
|
|
+ // this.style.backgroundColor = "green"
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ // })
|
|
|
|
|
+ // tdarr.forEach(tdOut => tdOut.onmouseout = function () {
|
|
|
|
|
+ // this.style.backgroundColor = "transparent"
|
|
|
|
|
+ // this.parentElement.style.backgroundColor = "transparent"
|
|
|
|
|
+ // })
|
|
|
|
|
+
|
|
|
|
|
+ //Подсветить строку и столбец,
|
|
|
|
|
+ let tdarr = document.querySelectorAll('td')
|
|
|
|
|
+ tdarr.forEach(tdOn => tdOn.onmousemove = function () {
|
|
|
|
|
+ this.style.backgroundColor = "green"
|
|
|
|
|
+ this.parentElement.style.backgroundColor = "green"
|
|
|
|
|
+ let index = this.cellIndex;
|
|
|
|
|
+ let column = document.querySelectorAll("tr")
|
|
|
|
|
+ column.forEach((columns) => columns.children[index].style.backgroundColor = "green");
|
|
|
|
|
+ })
|
|
|
|
|
+ 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("numberOne")
|
|
|
|
|
+ // let number2 = document.getElementById("numberTwo")
|
|
|
|
|
+ // calc.onclick = function(){
|
|
|
|
|
+ // result.value = ((+numberOne.value) + (+numberTwo.value))
|
|
|
|
|
+ // }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ // Calc live
|
|
|
|
|
+ function calc() {
|
|
|
|
|
+ result.value = ((+numberOne.value) + (+numberTwo.value))
|
|
|
|
|
+ }
|
|
|
|
|
+ numberOne.oninput = calc
|
|
|
|
|
+ numberTwo.oninput = calc
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+
|
|
|
|
|
+</html>
|
