效果展示
前端Html代码 progress.html
<html>
<head>
<meta charset="gb2312">
<title>进度条测试</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" type="text/css" media="screen">
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javaScript">
var t;
var xmlHttp = false; //全局变量，用于记录XMLHttpRequest对象
//创建XMLHttpRequest对象的方法,支持多浏览器
function createXMLHttpRequest() {
if(window.ActiveXObject) { //Inetrnet Explorer时，创建XMLHttpRequest对象的方法
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
//旧版本的Inetrnet Explorer，创建XMLHttpRequest对象
} catch(e) {
window.alert("创建XMLHttpRequest对象错误"+e);
}
}
} else if(window.XMLHttpRequest) { //mozilla时，创建XMLHttpRequest对象的方法
xmlHttp = new XMLHttpRequest();
}
if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象
window.alert("创建XMLHttpRequest对象异常！");
}
}
//开始向服务器请求数据
function startRun(){
createXMLHttpRequest();
xmlHttp.onreadystatechange = aginCallBack;
document.getElementById("run").disabled=true; //设置按钮不可用
var url = "http://localhost/example/progress.php";
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
//进度条执行函数
function aginCallBack() {
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200) { //status状态正常时
var response = xmlHttp.responseText; //将服务器返回的值赋予response
//alert("xmlHttp.responseText="+response);
//将得到的值+‘%’号，然后赋值与进度条style的width属性
document.getElementById("progress-bar").style.width = response+'%';
//应为进度条的最大值也就是100%,所以返回值不能大于10,如果大于100则不再请求,当然服务端返回的值最大也为100
if(response <=100){
//每隔一秒钟就调用一次startRun()函数
t = setTimeout("startRun()",1000);
}else{
document.getElementById("txt").style.visibility = "visible";
document.getElementById("txt").value = "100%完成更新";
}
}
}
}
</script>
</head>
<body>
<div id="jdt" style="width:400px;heigh:50px;margin:auto;margin-top:100px;">
<input type="button" id="run" value="更新" onclick="startRun();"></input>
<!-- <input type="text" id="txt" value="无值"></input> -->
<div class="progress">
<div id="progress-bar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
</div>
</div>
<input type="text" id="txt" value="" style="visibility:hidden;"></input>
</div>
</body>
</html>
后台PHP代码 progress.php
<?php
// +----------------------------------------------------------------------
// | SNS [ WE CAN DO IT MORE SIMPLE ]
// +----------------------------------------------------------------------
// | Copyright (c) 2018-2020 https://xugj520.cn/ All rights reserved.
// +----------------------------------------------------------------------
// | Author: Jack xu <514583562@qq.com>
// +----------------------------------------------------------------------
// | Date: 2019/3/8 16:07
// +----------------------------------------------------------------------
//text.txt文件只用于我记录初始时间
$txt = file_get_contents("text.txt");
$timeone = date("i:s",time());
$timenow = getdate();
if ($txt == "") { //如果text.txt文件空，则将当前时间记录下
file_put_contents("text.txt", $timeone);
echo 0; //并向客户端返回0，也就是进度条为0%
}else{
$arrtxt = explode(":", $txt);
$value1 = $arrtxt[0]*60+$arrtxt[1];
$value2 = $timenow["minutes"]*60+$timenow["seconds"];
$proportion = $value2-$value1; //得到时间差，相当于已完成传输多少数据
if ($proportion >100){ //如果时间差大于100，则清空text.txt文档。防止返回给客户端的值大于100
file_put_contents("text.txt","");
}
echo $proportion; //返回给客户端的值
}