動態更新進度條

時間 2019-11-08

標籤動態更新進度简体版

原文原文鏈接

index.htmljavascript

<html>
<head>
    <title>JSP+Ajax 進度條</title>
    <script type="text/javascript">
        var xmlHttp;
        var bar_color = 'blue';
        var span_id = "yellow";
        var clear = "   "html

        function createXMLHttpRequest() {
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
        }java

        function go() {
            createXMLHttpRequest();
            checkDiv();
            var url = "ProgressBarJsp.jsp?task=create";
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = goCallback;
            xmlHttp.send(null);
        }sql

                        elem.style.backgroundColor = bar_color;
                        var next_cell = i + 1;
                        if (next_cell > index && next_cell <= 9) {
                            document.getElementById("block" + next_cell).innerHTML = percent_complete + "%";
                        }
                    }
                    if (index < 9) {
                        setTimeout("pollServer()", 2000);
                    } else {
                        document.getElementById("complete").innerHTML = "網站已完成加載!";
                    }
                }
            }
        }

        function processResult(percent_complete) {
            var ind;
            if (percent_complete.length == 1) {
                ind = 1;
            } else if (percent_complete.length == 2) {
                ind = percent_complete.substring(0, 1);
            } else {
                ind = 9;
            }
            return ind;
        }網站

    <p>
    <table align="center">
        <tbody>
            <tr><td>
                <div id="progressBar" style="padding:2px;border:solid yellow 2px;visibility:hidden">
                    <span id="block1">   </span>
                    <span id="block2">   </span>
                    <span id="block3">   </span>
                    <span id="block4">   </span>
                    <span id="block5">   </span>
                    <span id="block6">   </span>
                    <span id="block7">   </span>
                    <span id="block8">   </span>
                    <span id="block9">   </span>
                </div>
            </td></tr>
            <tr><td align="center" id="complete"></td></tr>
        </tbody>
    </table>
</body>
</html>spa

ProgressBarJsp.jspxml

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<%!
int counter = 1;//注意：多用戶將共享此變量，此進度條只適合單用戶
%>
<%
String task = request.getParameter("task");
        String res = "";

        if (task.equals("create")) {
            res = "1";
            counter = 1;
        }
        else {
            String percent = "";
            switch (counter) {
                case 1: percent = "10"; break;
                case 2: percent = "23"; break;
                case 3: percent = "35"; break;
                case 4: percent = "51"; break;
                case 5: percent = "64"; break;
                case 6: percent = "73"; break;
                case 7: percent = "89"; break;
                case 8: percent = "100"; break;
            }
            counter++;

            res = "<percent>" + percent + "</percent>";
        }

       // PrintWriter out = response.getWriter();
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        out.println("<response>");
        out.println(res);
        out.println("</response>");
        out.close();
%>htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。