index.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <div>
  11. <input type="number" id="number1" />
  12. <input type="number" id="number2" />
  13. <button id="calc">Посчитать</button>
  14. <input type="text" name="" id="result" />
  15. </div>
  16. <script>
  17. // -------------------Таблица умножения, Подсветить ячейку, Подсветить строку и столбец
  18. let table = document.createElement("table");
  19. document.body.append(table);
  20. for (let i = 1; i < 10; i++) {
  21. let tr = document.createElement("tr");
  22. table.append(tr);
  23. tr.style.border = "1px solid black";
  24. for (let a = 1; a < 10; a++) {
  25. let td = document.createElement("td");
  26. tr.append(td);
  27. td.innerText = i * a;
  28. td.style.border = "2px solid black";
  29. td.style.padding = "10px";
  30. td.style.margin = "0px";
  31. }
  32. }
  33. let tdarr = document.querySelectorAll("td");
  34. tdarr.forEach(
  35. (tdOn) =>
  36. (tdOn.onmousemove = function () {
  37. this.style.backgroundColor = "cyan";
  38. this.parentElement.style.backgroundColor = "cyan";
  39. let index = this.cellIndex;
  40. let column = document.querySelectorAll("tr");
  41. column.forEach(
  42. (columns) =>
  43. (columns.children[index].style.backgroundColor =
  44. "cyan")
  45. );
  46. })
  47. );
  48. tdarr.forEach(
  49. (tdOut) =>
  50. (tdOut.onmouseout = function () {
  51. this.style.backgroundColor = "transparent";
  52. this.parentElement.style.backgroundColor =
  53. "transparent";
  54. let index = this.cellIndex;
  55. let column = document.querySelectorAll("tr");
  56. column.forEach(
  57. (columns) =>
  58. (columns.children[index].style.backgroundColor =
  59. "transparent")
  60. );
  61. })
  62. );
  63. // ------------------------ Calc
  64. let number1 = document.getElementById("number1");
  65. let number2 = document.getElementById("number2");
  66. calc.onclick = function () {
  67. alert(+number1.value + +number2.value);
  68. };
  69. // ------------------------ Calc Live
  70. function calc() {
  71. result.value = +number1.value + +number2.value;
  72. }
  73. number1.oninput = calc;
  74. number2.oninput = calc;
  75. </script>
  76. </body>
  77. </html>