|
@@ -0,0 +1,96 @@
|
|
|
|
+// Таблица умножения
|
|
|
|
+let table = document.createElement('table');
|
|
|
|
+let caption = document.createElement("caption");
|
|
|
|
+
|
|
|
|
+for (let i = 0; i <= 9; i++) {
|
|
|
|
+ let row = document.createElement('tr');
|
|
|
|
+ for (let j = 0; j <= 9; j++) {
|
|
|
|
+ let col = document.createElement('td');
|
|
|
|
+ let val = i * j;
|
|
|
|
+ if (val === 0) {
|
|
|
|
+ val = i || j;
|
|
|
|
+ }
|
|
|
|
+ if (caption) {
|
|
|
|
+ table.appendChild(caption);
|
|
|
|
+ }
|
|
|
|
+ col.innerHTML = val;
|
|
|
|
+ row.appendChild(col);
|
|
|
|
+ }
|
|
|
|
+ table.appendChild(row);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+document.body.appendChild(table);
|
|
|
|
+
|
|
|
|
+// Подсветить ячейку
|
|
|
|
+// Подсветить строку и столбец
|
|
|
|
+let tdAll = document.querySelectorAll('td');
|
|
|
|
+let trAll = document.querySelectorAll('tr');
|
|
|
|
+
|
|
|
|
+tdAll.forEach(function(td) {
|
|
|
|
+ td.addEventListener('mouseover', function(event) {
|
|
|
|
+ let target = event.target;
|
|
|
|
+ target.style.backgroundColor = '#FFF8DC';
|
|
|
|
+ target.parentElement.style.backgroundColor = '#00BFFF';
|
|
|
|
+ let index = target.cellIndex;
|
|
|
|
+ trAll.forEach (tr =>tr.children[index].style.backgroundColor = '#FFDAB9');
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ td.addEventListener('mouseout', function(event) {
|
|
|
|
+ let target = event.target;
|
|
|
|
+ target.style.backgroundColor = '';
|
|
|
|
+ target.parentElement.style.backgroundColor = '';
|
|
|
|
+ let index = target.cellIndex;
|
|
|
|
+ trAll.forEach (tr =>tr.children[index].style.backgroundColor = '');
|
|
|
|
+ })
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+// Подсветить текст
|
|
|
|
+caption.addEventListener("mouseover", function(event) {
|
|
|
|
+ event.target.style.background = "#00BFFF";
|
|
|
|
+ event.target.style.color = "#FFF";
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+caption.addEventListener("mouseout", function(event) {
|
|
|
|
+ event.target.style.background = "";
|
|
|
|
+ event.target.style.color = "";
|
|
|
|
+})
|
|
|
|
+//добавила для красоты
|
|
|
|
+
|
|
|
|
+// Calc +/-
|
|
|
|
+function plus() { //функция сложения
|
|
|
|
+ let num1, num2, result;
|
|
|
|
+ num1 = document.getElementById('n1').value;
|
|
|
|
+ num1 = parseInt(num1); //parseInt изменяет неккоректно введенное значение в валидное значение - число
|
|
|
|
+ num2 = document.getElementById('n2').value;
|
|
|
|
+ num2 = parseInt(num2);
|
|
|
|
+ result = num1 + num2;
|
|
|
|
+ document.getElementById('out').innerHTML = result;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function minus() { //функция вычетания
|
|
|
|
+ let num1, num2, result;
|
|
|
|
+ num1 = document.getElementById('n1').value;
|
|
|
|
+ num1 = parseInt(num1);
|
|
|
|
+ num2 = document.getElementById('n2').value;
|
|
|
|
+ num2 = parseInt(num2);
|
|
|
|
+ result = num1 - num2;
|
|
|
|
+ document.getElementById('out').innerHTML = result;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// My Calc
|
|
|
|
+let btn = document.querySelector('#btn');
|
|
|
|
+let answer = document.querySelector('#wt');
|
|
|
|
+let result = document.querySelector('#end');
|
|
|
|
+
|
|
|
|
+btn.onclick = function() {
|
|
|
|
+ result = answer.value * 1.5;
|
|
|
|
+ document.getElementById('end').innerHTML = result;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// My Calc Live
|
|
|
|
+function calc() {
|
|
|
|
+ result.value = +answer.value * 1.5;
|
|
|
|
+ document.getElementById('end').innerHTML = result.value;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+answer.oninput = calc
|