高效码农

PHP实现简单的进度条

效果展示

前端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;  //返回给客户端的值
}

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »