차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:howto:more_-_progress_bars [2021/04/12 14:26]
emblim98 만듦
+++ wiki:howto:more_-_progress_bars [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
-======HOW TO - Off-Canvas Menu======
+======HOW TO - JavaScript Progress Bar======
 <WRAP left notice 80%>
   * description : How TO - Off-Canvas Menu
@@ 줄 9: / 줄 9: @@
 \\
 ====Ref====
-[[https://www.w3schools.com/howto/howto_js_off-canvas.asp|How TO - Off-Canvas Mnu]]\\
+[[https://www.w3schools.com/howto/howto_js_progressbar.asp|How TO - More - JavaScript Progress Bar]]\\
+\\
+%%JavaScript%%를 사용하여 프로그레스 바 제작 방법을 학습합니다.\\
+=====Creating a Progress Bar=====
+Step 1) Add HTML:\\
+====예제====
+<code html>
+<div id="myProgress">
+  <div id="myBar"></div>
+</div>
+</code>
+\\
+Step 2) Add CSS:\\
+====예제====
+<code css>
+#myProgress {
+  width: 100%;
+  background-color: #ddd;
+}
+#myBar {
+  width: 1%;
+  height: 30px;
+  background-color: #4caf50;
+}
+</code>
+\\
+Step 3) Add JavaSCript:\\
+%%JavaSCript%%를 사용하여 애니메이션 효과가 있는 __다이내믹 프로그레스 바__(Dynamic Progress Bar)를 만듭니다.\\
+====예제====
+<code javascript>
+    var i = 0;
+    function move() {
+      if (i == 0) {
+        var elem = document.getElementById("myBar");
+        var width = 1;
+        var id = setInterval(frame, 10);
+        function frame() {
+          if (width >= 100) {
+            clearInterval(id);
+            i = 0;
+          } else {
+            width++;
+            elem.style.width = width + "%";
+          }
+        }
+      }
+    }
+</code>
+=====Add Labels=====
+사용자가 프로세스에서 얼마나 멀리 있는 지를 나타내는 레이블을 추가하려면,\\
+프로그레스 바 내부 (또는 외부)에 새 요소를 추가합니다.\\
+\\
+Step 1) Add HTML:\\
+====예제====
+<code html>
+<div id="myProgress">
+    <div id="myBar">10%</div>
+  </div>
+</code>
+\\
+Step 2) Add CSS:
+====예제====
+<code css>
+#myBar {
+    width: 10%;
+    height: 30px;
+    background-color: #4caf50;
+    text-align: center; /* To center it horizontally (if you want) */
+    line-height: 30px; /* To center it vertically */
+    color: white;
+  }
+</code>
+\\
+Step 3) Add JavaScript:\\
+====예제====
+<code javascript>
+ var i = 0;
+    function move() {
+      if (i == 0) {
+        var elem = document.getElementById("myBar");
+        var width = 10;
+        var id = setInterval(frame, 10);
+        function frame() {
+          if (width >= 100) {
+            clearInterval(id);
+            i = 0;
+          } else {
+            width++;
+            elem.style.width = width + "%";
+            elem.innerHTML = width + "%";
+          }
+        }
+      }
+    }
+</code>
+\\
+====전체 코드====
+<HTML>
+<!DOCTYPE html>
+<html>
+<style>
+  #myProgress {
+    width: 100%;
+    background-color: #ddd;
+  }
+  #myBar {
+    width: 10%;
+    height: 30px;
+    background-color: #4caf50;
+    text-align: center; /* To center it horizontally (if you want) */
+    line-height: 30px; /* To center it vertically */
+    color: white;
+  }
+</style>
+<body>
+  <h1>JavaScript Progress Bar</h1>
+  <div id="myProgress">
+    <div id="myBar">10%</div>
+  </div>
+  <br>
+  <button onclick="move()">Click Me</button>
+  <script>
+    var i = 0;
+    function move() {
+      if (i == 0) {
+        var elem = document.getElementById("myBar");
+        var width = 10;
+        var id = setInterval(frame, 10);
+        function frame() {
+          if (width >= 100) {
+            clearInterval(id);
+            i = 0;
+          } else {
+            width++;
+            elem.style.width = width + "%";
+            elem.innerHTML = width + "%";
+          }
+        }
+      }
+    }
+  </script>
+</body>
+</html>
+</HTML>

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구