Home Explore Help
Register Sign In
choozmo
/
AI_anchor_openshot
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

test progress bar

ming 3 years ago
parent
2310ef5a00
commit
37a2897cf0
2 changed files with 45 additions and 1 deletions
Split View Show Diff Stats
  1. 1 1
      main.py
  2. 44 0
      progress.html

+ 1 - 1
main.py
View File 

@@ -128,7 +128,7 @@ async def websocket_endpoint(websocket: WebSocket, client_id: int):
 
         while True:
 
             data = await websocket.receive_text()
 
             await manager.send_personal_message(f"You wrote: {data}", websocket)
 
-            await manager.broadcast(f"Client #{client_id} says: {data}")
 
+            await manager.broadcast("70")
 
     except WebSocketDisconnect:
 
         manager.disconnect(websocket)
 
         await manager.broadcast(f"Client #{client_id} left the chat")

+ 44 - 0
progress.html
View File 

@@ -3,6 +3,21 @@
 
     <head>
 
         <title>Chat</title>
 
     </head>
 
+    <style>
 
+      #myProgress {
 
+        width: 100%;
 
+        background-color: #ddd;
 
+      }
 
+      
+      #myBar {
 
+        width: 10%;
 
+        height: 30px;
 
+        background-color: #04AA6D;
 
+        text-align: center;
 
+        line-height: 30px;
 
+        color: white;
 
+      }
 
+      </style>
 
     <body>
 
         <h1>WebSocket Chat</h1>
 
         <h2>Your ID: <span id="ws-id"></span></h2>
 
@@ -30,5 +45,34 @@
 
                 event.preventDefault()
 
             }
 
         </script>
 
+
 
+<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) {
 
+    i = 1;
 
+    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>