123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257 |
- // Таблица умножения
- // Сделать таблицу умножения, используя 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;
- }
|