|
|
@@ -0,0 +1,124 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ td {
|
|
|
+ border: 1px solid grey;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* td:hover{
|
|
|
+ background-color: hotpink;
|
|
|
+ } */
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+
|
|
|
+ <h2>Таблица умножения</h2>
|
|
|
+ <input type="text" id='inputrows' placeholder="Введите количество строк">
|
|
|
+ <input type="text" id='inputcolumns' placeholder="Введите количество столбцов">
|
|
|
+ <button id="button">Расчитать</button>
|
|
|
+ <div id='div'></div>
|
|
|
+
|
|
|
+ <h2>Calc</h2>
|
|
|
+ <input type="text" id="power" placeholder="Enter power of 1 lamp--W">
|
|
|
+ <input type="text" id="numeric" placeholder="Enter number of lamps--part/parts">
|
|
|
+ <input type="text" id="hours" placeholder="Enter the working lamp`s hours--hour/hours">
|
|
|
+ <button id="calc">Calculate</button>
|
|
|
+ <div id="data"></div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+
|
|
|
+ // Таблица умножения && Подсветить ячейку && Подсветить строку и столбец,
|
|
|
+ var rows = document.getElementById('inputrows')
|
|
|
+ var colums = document.getElementById('inputcolumns')
|
|
|
+ var button = document.getElementById('button')
|
|
|
+ var div = document.getElementById('div')
|
|
|
+
|
|
|
+ button.onclick = function () {
|
|
|
+ rows.value = +rows.value
|
|
|
+ colums.value = +colums.value
|
|
|
+
|
|
|
+ var table = document.createElement('table');
|
|
|
+ div.appendChild(table);
|
|
|
+
|
|
|
+ for (let i = 1; i <= rows.value; i++) {
|
|
|
+ var tr = document.createElement('tr');
|
|
|
+ table.appendChild(tr);
|
|
|
+
|
|
|
+
|
|
|
+ for (let j = 1; j <= colums.value; j++) {
|
|
|
+ var td = document.createElement('td');
|
|
|
+ tr.appendChild(td);
|
|
|
+ var val = i * j;
|
|
|
+ td.innerText = val
|
|
|
+
|
|
|
+ //Подсветить ячейку
|
|
|
+ // td.onmouseover = function (event) {
|
|
|
+ // this.style.backgroundColor = 'red'
|
|
|
+ // }
|
|
|
+ // td.onmouseout = function (event) {
|
|
|
+ // this.style.backgroundColor = 'yellow'
|
|
|
+ // }
|
|
|
+
|
|
|
+ //Подсветить строку и столбец,
|
|
|
+ td.onmouseover = function (event) {
|
|
|
+ //console.log(this, event) //event - это объект с информацией о событии,
|
|
|
+ //передается первым параметром в обработчик события;в обработчик события в качестве
|
|
|
+ //this передается элемент, на котором событие произошло;
|
|
|
+ this.parentElement.style.backgroundColor = 'pink'
|
|
|
+ var x = this.cellIndex
|
|
|
+ var rows = document.querySelectorAll('tr')
|
|
|
+ rows.forEach((item) => item.children[x].style.backgroundColor = 'pink')
|
|
|
+ this.style.backgroundColor = 'red'
|
|
|
+ }
|
|
|
+ td.onmouseout = function (event) {
|
|
|
+ this.parentElement.style.backgroundColor = ''
|
|
|
+ var x = this.cellIndex
|
|
|
+ var rows = document.querySelectorAll('tr')
|
|
|
+ rows.forEach((item) => item.children[x].style.backgroundColor = '')
|
|
|
+ this.style.backgroundColor = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //Calc && Calc Live
|
|
|
+ var Power = document.getElementById('power')
|
|
|
+ var Numeric = document.getElementById('numeric')
|
|
|
+ var Hours = document.getElementById('hours')
|
|
|
+ var Calc = document.getElementById('calc')
|
|
|
+ var Data = document.getElementById('data')
|
|
|
+ // do{
|
|
|
+ // alert('Fill the fields of input')
|
|
|
+ //}
|
|
|
+ //while (Power.value !=='' && Numeric.value !=='' && Hours.value !=='') {
|
|
|
+ //if(Power.value ==true && Numeric.value == true && Hours.value == true){
|
|
|
+ // //if(true){
|
|
|
+ function calc() {
|
|
|
+ var Result = ((+Power.value) * (+Numeric.value) * (+Hours.value)) / 1000
|
|
|
+ Data.innerHTML += `<p style="background-color: rgb(146, 228, 231); border-radius: 10px; padding: 15px">
|
|
|
+ Power of lamp/lamps: ${Power.value}; </br> Number of lamp/lamps: ${Numeric.value}; </br>
|
|
|
+ Working hours of lamp/lamps: ${Hours.value}; </br> Result calculates in kilo-Watts: ${Result}</p>`
|
|
|
+ //alert('Result calculates in kilo-Watts: ' + Result)
|
|
|
+ }
|
|
|
+ Power.oninput = calc
|
|
|
+ Numeric.oninput = calc
|
|
|
+ Hours.oninput = calc
|
|
|
+ // }else{
|
|
|
+ // alert('Fill the fields of input')
|
|
|
+ // }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
