首页 发现 帮助
登录
Hryhorii
/
hw-js-06
关注 1
点赞 0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

fucking sheet

unknown 3 年之前
父节点
59e234f02b
当前提交
38245db966
共有 4 个文件被更改，包括 225 次插入 和 4 次删除
合并视图 显示文件统计
  1. 41 0
      html-css/css/styles.css
  2. 12 2
      html-css/index.html
  3. 77 1
      javascript/homework.js
  4. 95 1
      javascript/homework.ts

+ 41 - 0
html-css/css/styles.css
查看文件 

@@ -0,0 +1,41 @@
 
+table {
 
+    padding: 10px;
 
+    background-color: rgb(201, 199, 199);
 
+}
 
+
 
+td {
 
+    width: 20px;
 
+    text-align: center;
 
+    background-color: grey;
 
+}
 
+
 
+.calc{
 
+    width: 100%;
 
+    display: flex;
 
+    justify-content: center;
 
+    flex-wrap: wrap;
 
+    padding: 30px 0;
 
+}
 
+.input {
 
+    width: 120px;
 
+    margin-right: 5px;
 
+    border: solid 2px black;
 
+    border-radius:5px ;
 
+}
 
+.input::placeholder{
 
+    font-size: 10px;
 
+}
 
+button{
 
+    width: 40px;
 
+    background-color: rgb(236, 232, 235);
 
+    border: solid 2px black;
 
+    border-radius:5px ;
 
+}
 
+
 
+p {
 
+    display: block;
 
+    width: 100%;
 
+    text-align: center;
 
+    color: rgb(177, 177, 174);
 
+
 
+}

+ 12 - 2
html-css/index.html
查看文件 

@@ -3,11 +3,21 @@
 
 	<head>
 
 	<head>
 
 		<meta charset="UTF-8" />
 
 		<meta charset="UTF-8" />
 
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-		<style hre></style>
 
+		<link href="../html-css/css/styles.css" rel="stylesheet" />
 
 		<title>Document-js</title>
 
 		<title>Document-js</title>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
-		<div id="wrapper"></div>
 
+		<input
 
+			class="input"
 
+			id="input"
 
+			placeholder="Write number into calc"
 
+			name="calc"
 
+		/>
 
+		<!-- <div class="calc">
 
+			 <input id="input" placeholder="Write number into calc" /> 
+			 <button id = "calc" >Calc</button> 
+			 <p>Result</p> 
+		</div>  -->
 
 	</body>
 
 	</body>
 
 	<script src="../javascript/homework.js" type="module"></script>
 
 	<script src="../javascript/homework.js" type="module"></script>
 
 </html>
 
 </html>

+ 77 - 1
javascript/homework.js
查看文件 

@@ -1 +1,77 @@
 
-console.log('hello');
 
+"use strict";
 
+//DOM: ДЗ
 
+//Таблица умножения
 
+//Сделать таблицу умножения, используя DOM createElement и innerText. Создайте таблицу,
 
+//вложенные строки и ячейки в циклах.Должно получится что - то вроде этого:
 
+// const table = document.createElement('table')
 
+// for (let i = 0; i < 10; i++){
 
+// 	const tr = document.createElement('tr')
 
+// 	for (let j = 1; j < 11; j++){
 
+// 		const td = document.createElement('td')
 
+// 			td.id = String(i) + String(j)
 
+// 			td.dataset.col = String(i)
 
+// 		if (j === 10) {
 
+// 			td.textContent = String(i)
 
+// 			tr.prepend(td)
 
+// 			continue
 
+// 		}
 
+// 		td.textContent = String((i === 0 ? 1 : i) * j)
 
+// 		tr.append(td)
 
+// 	}
 
+// 	table.append(tr)
 
+// }
 
+// document.body.append(table)
 
+//Подсветить ячейку
 
+//над которой находится курсор мыши. Используйте события mouseover и mouseout, 
+//и style.backgroundColor для подсветки.
 
+//Читкоды:
 
+//в обработчик события в качестве this передается элемент, на котором событие произошло;
 
+//Внимание: :hover это читерство :-
 
+// let tdId;
 
+// table.onmouseover = function (e: MouseEvent): void {
 
+// 	const {tagName,id} = e.target
 
+// 	const oldTd = document.getElementById(tdId)
 
+// 	if (oldTd) oldTd.style.backgroundColor = 'grey'
 
+// 	if (tagName === "TD") {
 
+// 		const td = document.getElementById(id)
 
+// 		td.style.backgroundColor = 'green'
 
+// 		tdId = id
 
+// 	} //event -   это объект с информацией о событии,
 
+//                              //передается первым параметром в обработчик события.
 
+// }
 
+// Подсветить строку и столбец,
 
+//в которой находится подсвеченная ячейка. Используйте parentElement 
+//(родительский элемент элемента DOM), и список его детей: children.
 
+//Читкоды:
 
+//в обработчик события в качестве this передается элемент, на котором событие произошло;
 
+//у td есть свойство cellIndex, в котором лежит номер ячейки;
 
+//у tr, аналогично есть свойство rowIndex - номер строки;
 
+// table.onmouseover = function ({target : {cellIndex,tagName, id , dataset : {col}}}): void {
 
+// 		this.childNodes.forEach(element => {
 
+// 			element.childNodes.forEach(td => {
 
+// 				if (td.cellIndex === cellIndex) {
 
+// 					td.style.backgroundColor = 'yellow'
 
+// 				} else if (td.dataset.col === col) {
 
+// 					td.style.backgroundColor = 'orange'
 
+// 				} else {
 
+// 					td.style.backgroundColor = 'grey'
 
+// 				}
 
+// 	   });
 
+// 	});
 
+// 	if (tagName === "TD") document.getElementById(id).
 
+// 		style.backgroundColor = 'green'
 
+// }
 
+//Calc
 
+//Сделайте ваш калькулятор из первых занятий используя DOM и элементы input 
+//(в т.ч.type = "number" для чисел) Каждому полю ввода присвойте тот или иной id для обращения в обрабочтике события.
 
+//Для запуска раcчета используйте, например < button id = "calc" > и
 
+//Также можете создать поле ввода для результата и записывать результат в value этого поля.
 
+var inputCalc = document.querySelector('.input');
 
+console.log(inputCalc);
 
+var i;
 
+inputCalc.addEventListener('change', updateValue);
 
+function updateValue(e) {
 
+    i += 1;
 
+    console.log(i);
 
+}
 
+console.log(i);

+ 95 - 1
javascript/homework.ts
查看文件 

@@ -1 +1,95 @@
 
-console.log('hello')
 
+"use strict";
 
+//DOM: ДЗ
 
+//Таблица умножения
 
+//Сделать таблицу умножения, используя DOM createElement и innerText. Создайте таблицу,
 
+//вложенные строки и ячейки в циклах.Должно получится что - то вроде этого:
 
+
 
+// const table = document.createElement('table')
 
+// for (let i = 0; i < 10; i++){
 
+// 	const tr = document.createElement('tr')
 
+// 	for (let j = 1; j < 11; j++){
 
+// 		const td = document.createElement('td')
 
+// 			td.id = String(i) + String(j)
 
+// 			td.dataset.col = String(i)
 
+// 		if (j === 10) {
 
+// 			td.textContent = String(i)
 
+// 			tr.prepend(td)
 
+// 			continue
 
+// 		}
 
+// 		td.textContent = String((i === 0 ? 1 : i) * j)
 
+// 		tr.append(td)
 
+// 	}
 
+// 	table.append(tr)
 
+// }
 
+// document.body.append(table)
 
+
 
+//Подсветить ячейку
 
+//над которой находится курсор мыши. Используйте события mouseover и mouseout, 
+//и style.backgroundColor для подсветки.
 
+//Читкоды:
 
+//в обработчик события в качестве this передается элемент, на котором событие произошло;
 
+//Внимание: :hover это читерство :-
 
+// let tdId;
 
+
 
+// table.onmouseover = function (e: MouseEvent): void {
 
+// 	const {tagName,id} = e.target
 
+// 	const oldTd = document.getElementById(tdId)
 
+// 	if (oldTd) oldTd.style.backgroundColor = 'grey'
 
+// 	if (tagName === "TD") {
 
+// 		const td = document.getElementById(id)
 
+// 		td.style.backgroundColor = 'green'
 
+// 		tdId = id
 
+// 	} //event -   это объект с информацией о событии,
 
+//                              //передается первым параметром в обработчик события.
 
+// }
 
+
 
+// Подсветить строку и столбец,
 
+	//в которой находится подсвеченная ячейка. Используйте parentElement 
+	//(родительский элемент элемента DOM), и список его детей: children.
 
+	//Читкоды:
 
+	//в обработчик события в качестве this передается элемент, на котором событие произошло;
 
+	//у td есть свойство cellIndex, в котором лежит номер ячейки;
 
+	//у tr, аналогично есть свойство rowIndex - номер строки;
 
+
 
+	
+
 
+// table.onmouseover = function ({target : {cellIndex,tagName, id , dataset : {col}}}): void {
 
+// 		this.childNodes.forEach(element => {
 
+// 			element.childNodes.forEach(td => {
 
+// 				if (td.cellIndex === cellIndex) {
 
+// 					td.style.backgroundColor = 'yellow'
 
+// 				} else if (td.dataset.col === col) {
 
+// 					td.style.backgroundColor = 'orange'
 
+// 				} else {
 
+// 					td.style.backgroundColor = 'grey'
 
+// 				}
 
+// 	   });
 
+// 	});
 
+// 	if (tagName === "TD") document.getElementById(id).
 
+// 		style.backgroundColor = 'green'
 
+// }
 
+
 
+//Calc
 
+//Сделайте ваш калькулятор из первых занятий используя DOM и элементы input 
+//(в т.ч.type = "number" для чисел) Каждому полю ввода присвойте тот или иной id для обращения в обрабочтике события.
 
+//Для запуска раcчета используйте, например < button id = "calc" > и
 
+//Также можете создать поле ввода для результата и записывать результат в value этого поля.
 
+
 
+const inputCalc = document.querySelector('.input')
 
+console.log(inputCalc)
 
+let i;
 
+inputCalc.addEventListener('change', updateValue);
 
+
 
+function updateValue(e) {
 
+	i +=1
 
+  console.log(i)
 
+}
 
+console.log(i)
 
+// const calcWrapper = document.getElementsByClassName('calc')[0]
 
+// const handleCalc = (e) => {
 
+// 	console.log(parseFloat(inputCalc.value))
 
+// 	console.log(inputCalc)
 
+// 	e.preventDefault()
 
+// }
 
+// console.log(calcWrapper)
 
+// calcWrapper.addEventListener('submit',handleCalc)