返回列表 发帖

Rank: 9Rank: 9Rank: 9
1# 跳转到 » 倒序看帖
打印
tT
admin发表于 2009-6-25 11:39 | 只看该作者

javascript动态进度条(附实例)

如果你的一段程序需要运行很长时间才能完成，在这段时间内又不想让你的客户等得不耐烦。那么 Progress_bar 可以帮你做到。

Process_bar 利用javascript动态生成一个进度条，并且它会根据你的任务进度来实时改变进度条的进度。
  1. <?php
  2. /**
  3. * @copyright 互联网
  4. * @author Chris Geisler
  5. * @整理 www.phppx.com
  6. * @desc
  7. *    如果你的一段程序需要很长时间才能完成，在这段时间内又不想让你的客户等得不耐烦。那么 Progress_bar 可以帮你做到。
  8. *    Process_bar 利用java script动态生成一个进度条，并且会根据你的任务进度来实时改变进度条的进度。
  9. */
  10. /*
  11. *    Written by Chris Geisler - dean@apartmentlocators.com
  12. *
  13. *    This script is distributed under the GPL License
  14. *
  15. *    This program is distributed in the hope that it will be useful,
  16. *    but WITHOUT ANY WARRANTY; without even the implied warranty of
  17. *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  18. *    GNU General Public License for more details.
  19. *
  20. *    http://www.gnu.org/licenses/gpl.txt
  21. *
  22. */

  24. class progress_bar
  25. {
  26.         var $name;                // The name of the html element representing the progress bar.
  27.         var $percent;   // The current percent value of the progress bar.
  28.         var $width;     // The maximum width of the progress bar.

  30.         /*Function progress_bar - The progress bar constructor function
  31.         parameters:
  32.         $name the name of the html element representing the progress bar.
  33.         $percent the initial percent value of the progress bar.
  34.         $width the initial width of the progress bar.
  35.         $auto_create if set to TRUE the create() function will be called upon construction of the progress bar
  36.         */
  37.         function progress_bar($name = 'pbar',$percent = 1,$width = 100,$auto_create = TRUE)
  38.         {
  39.                 $this->name = $name;

  41.                 $this->percent = $percent;

  43.                 $this->width = $width;
  44.                 if($auto_create)
  45.                 {
  46.                         $this->create();
  47.                 }
  48.           }

  50.         /*Function create() - Dispalys the progress bar as an html
  51.         element. (Warning: do not call this function twice or if $auto_create is set to TRUE)

  53.         parameters:
  54.         $name sets the name of the html element
  55.         (This function becomes usless after the create(); function is called.)*/
  56.         function create()
  57.         {
  58.                 ?>
  59.                 <div align="center">
  60.                   <center>
  61.                   <table height="20" name="<? echo('table_' . $this->name);?>" border="0" cellpadding="0" cellspacing="0" width="<? echo($this->width + 60);?>">
  62.                         <tr>
  63.               <td width="52" height="20"><p>Progress: </p></td>
  64.                       <td width="4" height="20" valign="top" align="left"><img border="0" src="http://www.realestate-in-fortworth.com/admin/images/begin-filled.gif" width="4" height="20"></td>
  65.                       <td name="<? echo('cell_' . $this->name);?>" align="left" valign="middle" width="<? echo($this->width);?>" height="20" style="background-repeat: repeat-x" background="http://www.realestate-in-fortworth.com/admin/images/fill_bg.gif"><img name="<? echo($this->name)?>" border="0" src="http://www.realestate-in-fortworth.com/admin/images/fill.gif" width="<? echo(($percent * .01) * $width);?>" height="11"></td>
  66.                       <td width="4"  height="20" valign="top" align="left"><img border="0" src="http://www.realestate-in-fortworth.com/admin/images/end-filled.gif" width="4" height="20"></td>
  67.                     </tr>
  68.                   </table>
  69.                   </center>
  70.                 </div>
  71.                 <?
  72.         }

  74.         /*Function set_name() - Sets the $percent of the object based
  75.         on current tasks done and the total tasks to finish.

  77.         parameters:
  78.         $name sets the name of the html element
  79.         (This function becomes usless after the create(); function is called.)*/
  80.         function set_name($name)
  81.         {
  82.                 $this->name = $name;
  83.         }

  85.         /*Function set_percent() - Sets the $percent of the progress bar
  86.         using a pre-calculated percent.

  88.         parameters:
  89.         $percent the pre-calculated percent*/
  90.         function set_percent($percent)
  91.         {
  92.                 $this->percent = $percent;

  94.                 echo('<script>document.images.' . $this->name . '.width = ' . ($this->percent / 100) * $this->width . '</script>');
  95.         }

  97.         /*Function set_percent_adv() - Sets the $percent of the object based
  98.         on current tasks done and the total tasks to finish.

  100.         parameters:
  101.         $cur_amount the curent number of tasks completed in a script
  102.         $max_amount the number of tasks to complete in a script*/
  103.         function set_percent_adv($cur_amount,$max_amount)
  104.         {
  105.                 $this->percent = ($cur_amount / $max_amount) * 100;
  106.                 echo('<script>document.images.' . $this->name . '.width = ' . ($this->percent / 100) * $this->width . '</script>');
  107.         }

  109.         /*Function set_width() - Sets the maximum $width of the progress bar.

  111.         parameters:
  112.         $cur_amount the curent number of tasks completed in a script
  113.         $max_amount the number of tasks to complete in a script*/
  114.         function set_width($width)
  115.         {
  116.                 $this->width = $width;
  117.         }
  118. }

  120. ?>
复制代码
例子：
  1. <!doctype html public "-//W3C//DTD HTML 4.0 //EN">
  2. <html>
  3. <head>
  4. <title>Progress Bar Example</title>
  5. </head>
  6. <body>
  7. <?php
  8. set_time_limit(0);
  9. include("class.progress_bar.php");

  11. $pbar = new progress_bar('pbar',1,200,FALSE); //Creates a 200 pixle width progress bar starting at 1 percent with the name pbar auto create = false

  13. $num_tasks = 20000; // the number of tasks to be completed.
  14. $pbar->create();
  15. for($cur_task = 0; $cur_task <= $num_tasks; $cur_task++)
  16. {
  17.     echo("<p>Task $cur_task complete.</p>"); // Execute the current task.
  18.         $pbar->set_percent_adv($cur_task,$num_tasks); // tells the progress bar that $cur_task of the 500 tasks is completed.
  19. }
  20. ?>
  21. </body>
  22. </html>
复制代码
收藏 分享

Rank: 1
2#
1983star发表于 2009-8-23 17:50 | 只看该作者
顶~~~~~~~~~~~~~~·



激情聊天室激情聊天室激情聊天室******************室******************激情聊天室青色五月天我爱我色就去吻YY亚洲图片sese美女************色狼五月天丁香五月天色五月天五月天网站77中国************品色97日本************激情聊天室
se五月天青色五月天视频聊天我爱我色******************成人激情聊天室视频聊天室55美女77成人网66******************77美女激情聊天室激情聊天室激情聊天室

TOP

返回列表