|
|
@@ -0,0 +1,257 @@
|
|
|
+// Таблица умножения
|
|
|
+
|
|
|
+// Сделать таблицу умножения, используя DOM createElement и innerText. Создайте таблицу, вложенные строки и ячейки в циклах.
|
|
|
+
|
|
|
+const space1 = document.createElement('br');
|
|
|
+document.body.appendChild(space1);
|
|
|
+
|
|
|
+const task1 = document.createElement('div');
|
|
|
+document.body.appendChild(task1);
|
|
|
+task1.setAttribute('id', 'task-1');
|
|
|
+
|
|
|
+var table = document.createElement('table');
|
|
|
+table.setAttribute('border', '2');
|
|
|
+var tableBody = document.createElement('tbody');
|
|
|
+
|
|
|
+
|
|
|
+for (let i = 1; i < 10; i++) {
|
|
|
+ var tr = document.createElement('tr');
|
|
|
+ for (let j = 1; j < 10; j++) {
|
|
|
+ var td = document.createElement('td');
|
|
|
+ var tdText = document.createTextNode(`${i * j}`);
|
|
|
+ td.appendChild(tdText);
|
|
|
+ tr.appendChild(td);
|
|
|
+ }
|
|
|
+ tableBody.appendChild(tr);
|
|
|
+}
|
|
|
+table.appendChild(tableBody);
|
|
|
+task1.appendChild(table);
|
|
|
+
|
|
|
+// Подсветить ячейку над которой находится курсор мыши.
|
|
|
+// Используйте события mouseover и mouseout, и style.backgroundColor для подсветки.
|
|
|
+
|
|
|
+// Читкоды:
|
|
|
+
|
|
|
+// в обработчик события в качестве this передается элемент, на котором событие произошло;
|
|
|
+
|
|
|
+// td.onmouseover = function (event) {
|
|
|
+// console.log(this, event) //event - это объект с информацией о событии,
|
|
|
+// //передается первым параметром в обработчик события.
|
|
|
+// }
|
|
|
+
|
|
|
+// Внимание: :hover это читерство :-)
|
|
|
+
|
|
|
+let tdarr = document.querySelectorAll("td");
|
|
|
+
|
|
|
+tdarr.forEach((tdMove) => (tdMove.onmousemove = function () {
|
|
|
+ this.style.backgroundColor = "gray";
|
|
|
+}));
|
|
|
+
|
|
|
+tdarr.forEach((tdOut) => (tdOut.onmouseout = function () {
|
|
|
+ this.style.backgroundColor = "transparent";
|
|
|
+}));
|
|
|
+
|
|
|
+// Подсветить строку и столбец,в которой находится подсвеченная ячейка.
|
|
|
+// Используйте parentElement (родительский элемент элемента DOM), и список его детей: children.
|
|
|
+
|
|
|
+// Читкоды:
|
|
|
+
|
|
|
+// * в обработчик события в качестве this передается элемент, на котором событие произошло;
|
|
|
+// * у td есть свойство cellIndex, в котором лежит номер ячейки;
|
|
|
+// * у tr, аналогично есть свойство rowIndex - номер строки;
|
|
|
+
|
|
|
+tdarr.forEach((tdMove) => (tdMove.onmousemove = function () {
|
|
|
+ this.parentElement.style.backgroundColor = "lightgray";
|
|
|
+ let index = this.cellIndex;
|
|
|
+ let column = document.querySelectorAll("tr");
|
|
|
+ column.forEach((columns) => (columns.children[index].style.backgroundColor = "lightgray"));
|
|
|
+ this.style.backgroundColor = "gray";
|
|
|
+}));
|
|
|
+
|
|
|
+tdarr.forEach((tdOut) => (tdOut.onmouseout = function () {
|
|
|
+ this.parentElement.style.backgroundColor = "transparent";
|
|
|
+ let index = this.cellIndex;
|
|
|
+ let column = document.querySelectorAll("tr");
|
|
|
+ column.forEach((columns) => (columns.children[index].style.backgroundColor = "transparent"));
|
|
|
+ this.style.backgroundColor = "transparent";
|
|
|
+}));
|
|
|
+
|
|
|
+// Calc
|
|
|
+
|
|
|
+// Сделайте ваш калькулятор из первых занятий используя DOM и элементы input (в т. ч. type="number" для чисел)
|
|
|
+// Каждому полю ввода присвойте тот или иной id для обращения в обрабочтике события.
|
|
|
+// Для запуска раcчета используйте, например <button id="calc"> и
|
|
|
+
|
|
|
+// calc.onclick = function(){
|
|
|
+// alert((+someIdOfInput1.value) + (+someIdOfInput2.value)) //просуммировали два поля ввода с id someIdOfInput1 и someIdOfInput2
|
|
|
+// }
|
|
|
+
|
|
|
+// Также можете создать поле ввода для результата и записывать результат в value этого поля.
|
|
|
+
|
|
|
+const space2 = document.createElement('br');
|
|
|
+document.body.appendChild(space2);
|
|
|
+
|
|
|
+const task2 = document.createElement('div');
|
|
|
+task2.style.width = '300px';
|
|
|
+document.body.appendChild(task2);
|
|
|
+
|
|
|
+let calculator = document.createElement('form');
|
|
|
+task2.appendChild(calculator);
|
|
|
+task2.setAttribute('id', 'task-2');
|
|
|
+
|
|
|
+let result = document.createElement('input');
|
|
|
+result.style.width = '292px';
|
|
|
+result.style.height = '100px';
|
|
|
+result.style.color = 'gray';
|
|
|
+result.style.fontSize = '14px'
|
|
|
+calculator.appendChild(result);
|
|
|
+
|
|
|
+let inputField1 = document.createElement('input');
|
|
|
+inputField1.setAttribute('type', 'number');
|
|
|
+inputField1.style.width = '142px';
|
|
|
+inputField1.style.height = '50px';
|
|
|
+calculator.appendChild(inputField1);
|
|
|
+
|
|
|
+let inputField2 = document.createElement('input');
|
|
|
+inputField2.setAttribute('type', 'number');
|
|
|
+inputField2.style.width = '142px';
|
|
|
+inputField2.style.height = '50px';
|
|
|
+calculator.appendChild(inputField2);
|
|
|
+
|
|
|
+let sum = document.createElement('button');
|
|
|
+sum.innerText = '+';
|
|
|
+sum.style.width = '75px';
|
|
|
+sum.style.height = '50px';
|
|
|
+calculator.appendChild(sum);
|
|
|
+
|
|
|
+let sub = document.createElement('button');
|
|
|
+sub.innerText = '-';
|
|
|
+sub.style.width = '75px';
|
|
|
+sub.style.height = '50px';
|
|
|
+calculator.appendChild(sub);
|
|
|
+
|
|
|
+let mult = document.createElement('button');
|
|
|
+mult.innerText = '*';
|
|
|
+mult.style.width = '75px';
|
|
|
+mult.style.height = '50px';
|
|
|
+calculator.appendChild(mult);
|
|
|
+
|
|
|
+let divide = document.createElement('button');
|
|
|
+divide.innerText = '/';
|
|
|
+divide.style.width = '75px';
|
|
|
+divide.style.height = '50px';
|
|
|
+calculator.appendChild(divide);
|
|
|
+
|
|
|
+sum.onclick = () => {
|
|
|
+ result.value = +inputField1.value + (+inputField2.value);
|
|
|
+};
|
|
|
+
|
|
|
+sub.onclick = () => {
|
|
|
+ result.value = +inputField1.value - (+inputField2.value);
|
|
|
+};
|
|
|
+
|
|
|
+mult.onclick = () => {
|
|
|
+ result.value = +inputField1.value * (+inputField2.value);
|
|
|
+};
|
|
|
+
|
|
|
+divide.onclick = () => {
|
|
|
+ result.value = +inputField1.value / (+inputField2.value);
|
|
|
+};
|
|
|
+
|
|
|
+// Calc Live
|
|
|
+
|
|
|
+// Сделайте расчет живым, т. е. обновляющимся по событию oninput каждого поля ввода, влияющего на результат.
|
|
|
+// Нет смысла копировать одну и ту же калькуляцию, поэтому вначале задекларируйте функцию расчета,
|
|
|
+// а потом присвойте её в качестве обработчика события в каждом поле ввода:
|
|
|
+
|
|
|
+// function calc() {
|
|
|
+// result.value = (+input1.value) + (+input2.value)
|
|
|
+// }
|
|
|
+
|
|
|
+// input1.oninput = calc
|
|
|
+// input2.oninput = calc
|
|
|
+
|
|
|
+const space3 = document.createElement('br');
|
|
|
+document.body.appendChild(space3);
|
|
|
+
|
|
|
+const task3 = document.createElement('div');
|
|
|
+task3.style.width = '300px';
|
|
|
+document.body.appendChild(task3);
|
|
|
+
|
|
|
+let liveCalculator = document.createElement('form');
|
|
|
+task3.appendChild(liveCalculator);
|
|
|
+task3.setAttribute('id', 'task-3');
|
|
|
+
|
|
|
+let liveResult = document.createElement('input');
|
|
|
+liveResult.style.width = '292px';
|
|
|
+liveResult.style.height = '100px';
|
|
|
+liveResult.style.color = 'gray';
|
|
|
+liveResult.style.fontSize = '14px'
|
|
|
+liveCalculator.appendChild(liveResult);
|
|
|
+
|
|
|
+let liveInputField1 = document.createElement('input');
|
|
|
+liveInputField1.setAttribute('type', 'number');
|
|
|
+liveInputField1.style.width = '142px';
|
|
|
+liveInputField1.style.height = '50px';
|
|
|
+liveCalculator.appendChild(liveInputField1);
|
|
|
+
|
|
|
+let liveInputField2 = document.createElement('input');
|
|
|
+liveInputField2.style.width = '142px';
|
|
|
+liveInputField2.style.height = '50px';
|
|
|
+liveCalculator.appendChild(liveInputField2);
|
|
|
+
|
|
|
+let liveSum = document.createElement('button');
|
|
|
+liveSum.innerText = '+';
|
|
|
+liveSum.style.width = '75px';
|
|
|
+liveSum.style.height = '50px';
|
|
|
+liveSum.style.backgroundColor = 'yellow';
|
|
|
+liveSum.style.fontWeight = '900';
|
|
|
+liveCalculator.appendChild(liveSum);
|
|
|
+
|
|
|
+let liveSub = document.createElement('button');
|
|
|
+liveSub.innerText = '-';
|
|
|
+liveSub.style.width = '75px';
|
|
|
+liveSub.style.height = '50px';
|
|
|
+liveSub.style.backgroundColor = 'blue';
|
|
|
+liveSub.style.fontWeight = '900'
|
|
|
+liveCalculator.appendChild(liveSub);
|
|
|
+
|
|
|
+let liveMult = document.createElement('button');
|
|
|
+liveMult.innerText = '*';
|
|
|
+liveMult.style.width = '75px';
|
|
|
+liveMult.style.height = '50px';
|
|
|
+liveMult.style.backgroundColor = 'red';
|
|
|
+liveCalculator.appendChild(liveMult);
|
|
|
+
|
|
|
+let liveDivide = document.createElement('button');
|
|
|
+liveDivide.innerText = '/';
|
|
|
+liveDivide.style.width = '75px';
|
|
|
+liveDivide.style.height = '50px';
|
|
|
+liveDivide.style.backgroundColor = 'green';
|
|
|
+liveCalculator.appendChild(liveDivide);
|
|
|
+
|
|
|
+liveSum.onclick = () => {
|
|
|
+ liveResult.value = +liveInputField1.value + (+liveInputField2.value);
|
|
|
+};
|
|
|
+
|
|
|
+liveSub.onclick = () => {
|
|
|
+ liveResult.value = +liveInputField1.value - (+liveInputField2.value);
|
|
|
+};
|
|
|
+
|
|
|
+liveMult.onclick = () => {
|
|
|
+ liveResult.value = +liveInputField1.value * (+liveInputField2.value);
|
|
|
+};
|
|
|
+
|
|
|
+liveDivide.onclick = () => {
|
|
|
+ liveResult.value = +liveInputField1.value / (+liveInputField2.value);
|
|
|
+};
|
|
|
+
|
|
|
+liveInputField1.oninput = () => {
|
|
|
+ liveResult.value = liveInputField1.value;
|
|
|
+ liveInputField2 = liveInputField2 || 0;
|
|
|
+};
|
|
|
+
|
|
|
+liveInputField2.oninput = () => {
|
|
|
+ liveInputField1 = liveInputField1 || 0;
|
|
|
+ liveResult.value = liveInputField2.value;
|
|
|
+}
|
