-5
我提琴上運行它的成功:http://jsfiddle.net/donhuvy/hfq4ycvs/爲什麼我的源代碼不起作用?
但是當我運行它在本地(文件progress_bar.html),沒有發生。
<!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 = [];
for (var i = 0; i < 100000; i++) {
var tmp = [];
for (var i = 0; i < 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>
你把你的文件放在哪裏?在本地服務器上? –
確保你已經安裝了像WAMP這樣的本地服務器。 – sabith
在控制檯中檢查您的錯誤消息。像其他人一樣,您應該使用本地Web服務器進行測試和/或將您的ajax調用修改爲/ echo/html – Dylan