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
Post a Comment