goole progressbar

最新推荐文章于 2025-12-19 15:33:32 发布

原创最新推荐文章于 2025-12-19 15:33:32 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#download #import #html #button #function #input

本文介绍了一个使用Dojo Toolkit创建动态更新进度条的示例。通过JavaScript代码控制进度条的显示，展示如何将进度条分为7%的段落，并在不同时间间隔更新进度。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Progress Bar Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
            djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dijit.ProgressBar");
        dojo.require("dojo.parser");

        function download(){
            // Split up bar into 7% segments
            numParts = Math.floor(100/7);
            jsProgress.update({ maximum: numParts, progress:0 });
            for (var i=0; i<=numParts; i++){
                // This plays update({progress:0}) at 1nn milliseconds,
                // update({progress:1}) at 2nn milliseconds, etc.
                setTimeout(
                   "jsProgress.update({ progress: " + i + " })",
                   (i+1)*100 + Math.floor(Math.random()*100)
                );
            }
        }
     </script>
</head>
<body class="tundra">
    <div dojoType="dijit.ProgressBar" style="width:300px"
         jsId="jsProgress" id="downloadProgress"></div>
    <input type="button" value="Go!" onclick="download();" />
</body></html>
See the API docs for more information on update().