javascript - Why my source code doesn't work? -


i run success on fiddle: http://jsfiddle.net/donhuvy/hfq4ycvs/

but when run (file progress_bar.html) in local, nothing happen.

<!doctype html>  <html> <head>     <title>progress bar...</title>     <style type="text/css">         .progress {             display: block;             text-align: center;             width: 0;             height: 3px;             background: red;             transition: width .3s;         }          .progress.hide {             opacity: 0;             transition: opacity 1.3s;         }     </style>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>     <script>         $(function () {             var data = [];             (var = 0; < 100000; i++) {                 var tmp = [];                 (var = 0; < 100000; i++) {                     tmp[i] = 'hue';                 }                 data[i] = tmp;             }             ;              $.ajax({                 xhr: function () {                     var xhr = new window.xmlhttprequest();                     xhr.upload.addeventlistener("progress", function (evt) {                         if (evt.lengthcomputable) {                             var percentcomplete = evt.loaded / evt.total;                             console.log(percentcomplete);                             $('.progress').css({                                 width: percentcomplete * 100 + '%'                             });                             if (percentcomplete === 1) {                                 $('.progress').addclass('hide');                             }                         }                     }, false);                     xhr.addeventlistener("progress", function (evt) {                         if (evt.lengthcomputable) {                             var percentcomplete = evt.loaded / evt.total;                             console.log(percentcomplete);                             $('.progress').css({                                 width: percentcomplete * 100 + '%'                             });                         }                     }, false);                     return xhr;                 },                 type: 'post',                 url: "/echo/html",                 data: data,                 success: function (data) {                 }             });         });       </script>  </head> <body>  <div class="progress"></div>  </body> </html> 

because ajax make request & wait response server, must put html file web server (apache http server or nginx), ajax run.


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -