首頁 探索 說明
登入
Pocu
/
Homework
關註 3
讚好 0
複刻 0
檔案 問題管理 6 合併請求 0 Wiki
瀏覽代碼

07 DOM done

pocu46 4 年之前
父節點
d19b98607a
當前提交
d49695564b
共有 3 個文件被更改，包括 78 次插入 和 12 次删除
分割檢視 顯示文件統計
  1. 35 12
      07/script.js
  2. 19 0
      14/index.html
  3. 24 0
      14/script.js

+ 35 - 12
07/script.js
查看文件 

@@ -3,11 +3,13 @@
 
 let task1 = document.createElement("div");
 
 document.body.append(task1);
 
 task1.innerText = "Таблица умножения";
 
-task1.style = "border: 2px solid; display: flex; justifyContent: center; alignItems: center; textAlign: center; margin: 15px 0"
 
+// task1.style = "border: 2px solid; display: flex; justifyContent: center; alignItems: center; textAlign: center; margin: 15px 0"
 
+task1.style = "border: 2px solid;  text-align: center; margin: 15px 0"
 
 
 let table = document.createElement("table");
 
 table.setAttribute("border", "1");
 
 document.body.append(table);
 
+table.setAttribute("align", "center");
 
 
 for (let y = 0; y < 10; y++) {
 
     let tr = document.createElement("tr");
 
@@ -60,12 +62,13 @@ for (let y = 0; y < 10; y++) {
 
 let task2 = document.createElement("div");
 
 document.body.append(task2);
 
 task2.innerText = "Подсветить строку и столбец";
 
-task2.style = "border: 2px solid; display: flex; justifyContent: center; alignItems: center; textAlign: center; margin: 15px 0"
 
+task2.style = "border: 2px solid; text-align: center; margin: 15px 0"
 
 
 function light() {
 
     let table = document.createElement("table");
 
     table.setAttribute("border", "1");
 
     document.body.append(table);
 
+    table.setAttribute("align", "center");
 
 
     for (let y = 0; y < 10; y++) {
 
         let tr = document.createElement("tr");
 
@@ -121,11 +124,12 @@ light();
 
 let task3 = document.createElement("div");
 
 document.body.append(task3);
 
 task3.innerText = "Выбор ячейки (сделал для практики)";
 
-task3.style = "border: 2px solid; display: flex; justifyContent: center; alignItems: center; textAlign: center; margin: 15px 0"
 
+task3.style = "border: 2px solid; text-align: center; margin: 15px 0"
 
 
 table = document.createElement("table");
 
 table.setAttribute("border", "1");
 
 document.body.append(table);
 
+table.setAttribute("align", "center");
 
 
 for (let y = 0; y < 10; y++) {
 
     let tr = document.createElement("tr");
 
@@ -162,13 +166,14 @@ for (let y = 0; y < 10; y++) {
 
 let task4 = document.createElement("div");
 
 document.body.append(task4);
 
 task4.innerText = "Calc";
 
-task4.style = "border: 2px solid; display: flex; justifyContent: center; alignItems: center; textAlign: center; margin: 15px 0"
 
+task4.style = "border: 2px solid; text-align: center; margin: 15px 0"
 
 
 let num1 = document.createElement("input");
 
 let num2 = document.createElement("input");
 
 let result = document.createElement("div");
 
 let calc = document.createElement("button");
 
 let check = document.createElement("input");
 
+let wrapper = document.createElement("div")
 
 
 num1.setAttribute("id", "1");
 
 num1.setAttribute("type", "number");
 
@@ -181,16 +186,34 @@ calc.setAttribute("id", "button");
 
 check.setAttribute("id", "checkbox");
 
 check.setAttribute("type", "checkbox");
 
 
-document.body.append(num1);
 
-document.body.append(num2);
 
-document.body.append(result);
 
-document.body.append(calc);
 
-document.body.append(check);
 
-
 
-calc.style = "height: 50px; width: 150px; background: #6290d0";
 
+document.body.append(wrapper);
 
+wrapper.append(num1);
 
+wrapper.append(num2);
 
+wrapper.append(result);
 
+wrapper.append(calc);
 
+wrapper.append(check);
 
+// document.write("shc");
 
+wrapper.append('Automation Calculation');
 
+wrapper.style = "display: flex; justify-content: space-around";
 
+// document.body.insertAdjacentHTML("beforeEnd", 'abrakadabra')
 
+
 
+// calc.style = "height: 50px; width: 150px; background: #6290d0";
 
 calc.innerHTML = "Calculate"
 
 result.style = "height: 50px; width: 150px; background: #fff; border: 2px solid";
 
 
 calc.onclick = () => {
 
-    result.innerText = num1.value + num2.value;
 
+    // result.innerText = num1.value + num2.value;
 
+    result.innerText = (+num1.value) + (+num2.value);
 
+}
 
+
 
+check.oninput = () => {
 
+    if(check.checked) {
 
+        calc.setAttribute("disabled", "disabled");
 
+        num1.oninput = num2.oninput = calc.onclick;
 
+        calc.onclick();
 
+    }
 
+    else {
 
+        calc.removeAttribute("disabled");
 
+        num1.oninput = num2.oninput = null;
 
+    }
 
 }

+ 19 - 0
14/index.html
查看文件 

@@ -0,0 +1,19 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <input type='text' id='nick' placeholder='nick'>
 
+    <input type='text' id='msg' placeholder='message'>
 
+    <button id='send'>Send</button>
 
+    <div id='chat'>
 
+    </div>
 
+    <script src="./script.js"></script>
 
+</body>
 
+
 
+</html>

+ 24 - 0
14/script.js
查看文件 

@@ -0,0 +1,24 @@
 
+// jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: 0}.then(r => console.log(r)))
 
+
 
+function jsonPost(url, data) {
 
+    return new Promise((resolve, reject) => {
 
+        var x = new XMLHttpRequest();
 
+        x.onerror = () => reject(new Error('jsonPost failed'))
 
+        //x.setRequestHeader('Content-Type', 'application/json');
 
+        x.open("POST", url, true);
 
+        x.send(JSON.stringify(data))
 
+
 
+        x.onreadystatechange = () => {
 
+            if (x.readyState == XMLHttpRequest.DONE && x.status == 200) {
 
+                resolve(JSON.parse(x.responseText))
 
+            } else if (x.status != 200) {
 
+                reject(new Error('status is not 200'))
 
+            }
 
+        }
 
+    })
 
+}
 
+
 
+send.onclick = function () {
 
+    console.log('1');
 
+    jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: "Anon", message: 'Я не умею копипастить в консоль, зато умею жать красную кнопку.'})
 
+}