|
|
@@ -0,0 +1,70 @@
|
|
|
+<!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>
|
|
|
+ <main class="main">
|
|
|
+ <div class="wrapper">
|
|
|
+ <input type="number" id ='firstNum'> *
|
|
|
+ <input type="number" id = 'secondNum'>
|
|
|
+ <button id = 'calc'>Посчитать</button>
|
|
|
+ Результат<input type="text" value=" " id = "result">
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+ //Таблица умножения
|
|
|
+ const table = document.createElement("table")
|
|
|
+ for (let i = 1;i<= 9;i++){
|
|
|
+ var row = document.createElement('tr');
|
|
|
+ row.style.padding = '0px'
|
|
|
+ for (let j = 1; j <= 9;j++){
|
|
|
+ var cell = document.createElement('td')
|
|
|
+ cell.appendChild(document.createTextNode(i*j))
|
|
|
+ cell.style.border = '1px solid black'
|
|
|
+ cell.style.padding = '10px'
|
|
|
+ cell.style.margin = '0px'
|
|
|
+ row.appendChild(cell);
|
|
|
+ }
|
|
|
+ table.appendChild(row);
|
|
|
+ }
|
|
|
+ document.body.appendChild(table)
|
|
|
+
|
|
|
+ //Подсветить ячейку ++ Подсветить строку и столбец,
|
|
|
+ const light = (event, color) => {
|
|
|
+ const target = event.target;
|
|
|
+ if (target.tagName === 'TD') {
|
|
|
+ target.style.background = color;
|
|
|
+ target.parentElement.style.background = color;
|
|
|
+ const index = event.srcElement.cellIndex;
|
|
|
+ const rows = document.querySelectorAll('tr');
|
|
|
+ rows.forEach((row) => row.children[index].style.background = color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ table.onmouseover = (event) => light(event, 'silver');
|
|
|
+ table.onmouseout = (event) => light(event, '');
|
|
|
+
|
|
|
+
|
|
|
+ //Calc
|
|
|
+ const numberOne = document.getElementById('firstNum')
|
|
|
+ const numberSecond = document.getElementById('secondNum')
|
|
|
+ calc.onclick = function(){
|
|
|
+ var result = document.getElementById('result')
|
|
|
+ }
|
|
|
+
|
|
|
+ //Calc Live
|
|
|
+ function calc() {
|
|
|
+ result.value = ((+numberOne.value) * (+numberSecond.value))
|
|
|
+ }
|
|
|
+ numberOne.oninput = calc
|
|
|
+ numberSecond.oninput = calc
|
|
|
+</script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
Vadym Shakhmatenko