3 changed files with 72 additions and 5 deletions
  1. 32 0
      js/04/css/style.css
  2. 7 0
      js/04/index.html
  3. 33 5
      js/04/js/script.js

+ 32 - 0
js/04/css/style.css

@@ -0,0 +1,32 @@
+.out {
+    width: 1920px;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+}
+.out2 {
+    width: 10%;
+    margin: 0 auto;
+    min-height: 600px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+}
+.wrap {
+    width: 1920px;
+    height: 600px;
+}
+.out3 {
+    width: 10%;
+    margin: 0 auto;
+    min-height: 600px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+}

+ 7 - 0
js/04/index.html

@@ -7,6 +7,13 @@
     <title>Document</title>
 </head>
 <body>
+    <div class="out"></div>
+    <div class="wrap">
+        <div class="out2"></div>
+    </div>  
+    <div class="wrap">
+        <div class="out3"></div>
+    </div> 
     <script src="./js/script.js"></script>
 </body>
 </html>

+ 33 - 5
js/04/js/script.js

@@ -145,9 +145,37 @@
 
 //                                          chess one line                                             //
 
-let i = '# ';
-let str = "";
-for (j=0;j<10;j++){
-	str += i;
+let out = document.querySelector('.out');
+
+for (let i = 0; i < 20; i++) {
+                out.innerHTML += '# ';
+        
+}
+//=====================================================================================================//
+
+//                                          numbers                                                    //
+
+let out2 = document.querySelector('.out2');
+
+for (let i = 0; i < 10; i++) {
+        for (let k = 0; k < 10; k++) {
+                out2.innerHTML += k;
+                
+        }
+        out2.innerHTML += '\n';
+        
 }
-console.log(str);
+//=====================================================================================================//
+
+//                                          chess                                                      //
+
+let chessWidth = 6;
+let chessHeight = 10;
+let out3 = document.querySelector('.out3')
+for (let i = 0; i < chessHeight; i++) {
+     for (let k = 0; k < chessWidth; k++) {
+             out3.innerHTML += '.#';
+             
+     }
+     out3.innerHTML += '\n';
+}