浏览代码

test progress bar

ming 3 年之前
父节点
当前提交
d892849abc
共有 2 个文件被更改,包括 40 次插入36 次删除
  1. 39 0
      index2.html
  2. 1 36
      script_msg.js

+ 39 - 0
index2.html

@@ -68,5 +68,44 @@
   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
   <script src="script_msg.js"></script>
+
+  <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>
+      <ul id='messages'>
+      </ul>
+      <script>
+          var ws = new WebSocket('ws://www.choozmo.com:8888/progress');
+          ws.onmessage = function(event) {
+              var elem = document.getElementById("myBar");
+              elem.style.width = event.data + "%";
+              elem.innerHTML = event.data  + "%";
+          };
+          function sendMessage(event) {
+              var input = document.getElementById("messageText")
+              ws.send(input.value)
+              input.value = ''
+              event.preventDefault()
+          }
+      </script>
+
+<div id="myProgress">
+<div id="myBar">10%</div>
+</div>
+
 </body>
 </html>

+ 1 - 36
script_msg.js

@@ -37,8 +37,6 @@ $(".next").click(function(){
 	type: 'post',
 	data: obj3,
 	success: function(suc_data) {
-            // data.redirect contains the string URL to redirect to
-            window.location.href = suc_data.redirect;
         
 	  },
 	//data:JSON.stringify({n1:"12",n2:"22"}),
@@ -46,40 +44,7 @@ $(".next").click(function(){
 		console.error(error)
 	}
 });
-	if(animating) return false;
-	animating = true;
-	
-	current_fs = $(this).parent();
-	next_fs = $(this).parent().next();
-	
-	$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
-	
-	//show the next fieldset
-	next_fs.show(); 
-	//hide the current fieldset with style
-	current_fs.animate({opacity: 0}, {
-		step: function(now, mx) {
-			//as the opacity of current_fs reduces to 0 - stored in "now"
-			//1. scale current_fs down to 80%
-			scale = 1 - (1 - now) * 0.2;
-			//2. bring next_fs from the right(50%)
-			left = (now * 50)+"%";
-			//3. increase opacity of next_fs to 1 as it moves in
-			opacity = 1 - now;
-			current_fs.css({
-        'transform': 'scale('+scale+')',
-        'position': 'absolute'
-      });
-			next_fs.css({'left': left, 'opacity': opacity});
-		}, 
-		duration: 800, 
-		complete: function(){
-			current_fs.hide();
-			animating = false;
-		}, 
-		//this comes from the custom easing plugin
-		easing: 'easeInOutBack'
-	});
+
 });
 
 $(".previous").click(function(){