|
|
@@ -1,56 +1,10 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
-<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>影片標題</h1>
|
|
|
-<h2>追蹤影片進度</h2>
|
|
|
-
|
|
|
-
|
|
|
-<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>
|
|
|
-
|
|
|
-<h1>WebSocket Chat</h1>
|
|
|
+ <head>
|
|
|
+ <title>Chat</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <h1>WebSocket Chat</h1>
|
|
|
<h2>Your ID: <span id="ws-id"></span></h2>
|
|
|
<form action="" onsubmit="sendMessage(event)">
|
|
|
<input type="text" id="messageText" autocomplete="off"/>
|
|
|
@@ -61,7 +15,7 @@ function move() {
|
|
|
<script>
|
|
|
var client_id = Date.now()
|
|
|
document.querySelector("#ws-id").textContent = client_id;
|
|
|
- var ws = new WebSocket(`ws://www.choozmo:8888/ws/${client_id}`);
|
|
|
+ var ws = new WebSocket(`ws://localhost:8000/ws/${client_id}`);
|
|
|
ws.onmessage = function(event) {
|
|
|
var messages = document.getElementById('messages')
|
|
|
var message = document.createElement('li')
|
|
|
@@ -76,7 +30,5 @@ function move() {
|
|
|
event.preventDefault()
|
|
|
}
|
|
|
</script>
|
|
|
-</body>
|
|
|
-</html>
|
|
|
-
|
|
|
-
|
|
|
+ </body>
|
|
|
+</html>
|
