当前位置:首页 > PHP源码 > 列表

PHP实现的进度条效果详解

发布:smiling 来源: PHP粉丝网  添加日期:2019-08-16 09:14:26 浏览: 评论:0 

本文实例讲述了PHP实现的进度条效果。分享给大家供大家参考,具体如下:

在做采集的时候,想通过php来实现一个进度条功能,谷歌了一下,找了个合适的代码。下面直接上代码:

  1. <?php 
  2.  
  3. //防止执行超时 
  4.  
  5. set_time_limit(0); 
  6.  
  7. //清空并关闭输出缓存 
  8.  
  9. ob_end_clean(); 
  10.  
  11. //需要循环的数据 
  12.  
  13. for($i = 0; $i < 188; $i++) 
  14.  
  15.  
  16.   $users[] = 'Tom_' . $i
  17.  
  18.  
  19. //计算数据的长度 
  20.  
  21. $total = count($users); 
  22.  
  23. //显示的进度条长度,单位 px  
  24.  
  25. $width = 500; 
  26.  
  27. //每条记录的操作所占的进度条单位长度 
  28.  
  29. $pix = $width / $total
  30.  
  31. //默认开始的进度条百分比 
  32.  
  33. $progress = 0; 
  34.  
  35. ?> 
  36.  
  37.   
  38.  
  39.   
  40.  
  41. <title>动态显示服务器运行程序的进度条</title> 
  42.  
  43. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
  44.  
  45. <style> 
  46.  
  47. body,div input { 
  48.  
  49.   font-family: Tahoma; 
  50.  
  51.   font-size: 9pt 
  52.  
  53.  
  54. </style> 
  55.  
  56. <script language="JavaScript"
  57.  
  58.  <!--  
  59.  
  60.  function updateProgress(sMsg, iWidth)  
  61.  
  62.  {  
  63.  
  64.   document.getElementById("status").innerHTML = sMsg;  
  65.  
  66.   document.getElementById("progress").style.width = iWidth + "px";  
  67.  
  68.   document.getElementById("percent").innerHTML = parseInt(iWidth / <?php echo $width; ?> * 100) + "%";  
  69.  
  70.   }  
  71.  
  72.  -->  
  73.  
  74.  </script> 
  75.  
  76.   
  77.  
  78.   
  79.  
  80.   <div style="margin:50px auto; padding: 8px; border: 1px solid gray; background: #EAEAEA; width: <?php echo $width+8; ?>px"
  81.  
  82.     <div style="padding: 0; background-color: white; border: 1px solid navy; width: <?php echo $width; ?>px"
  83.  
  84.       <div id="progress" style="padding: 0; background-color: #FFCC66; border: 0; width: 0px; text-align: center; height: 16px"></div> 
  85.  
  86.     </div> 
  87.  
  88.     <div id="status"></div> 
  89.  
  90.     <div id="percent" style="position: relative; top: -30px; text-align: center; font-weight: bold; font-size: 8pt">0%</div> 
  91.  
  92.   </div>  
  93.  
  94. <?php 
  95.  
  96. flush(); //将输出发送给客户端浏览器  
  97.  
  98. foreach($users as $user
  99.  
  100.  
  101.   // 在此处使用空循环模拟较为耗时的操作,实际应用中需将其替换;  
  102.  
  103.   // 如果你的操作不耗时,我想你就没必要使用这个脚本了 :)  
  104.  
  105.   for($i = 0; $i < 1000000; $i++) 
  106.  
  107.   { 
  108.  
  109.   } 
  110.  
  111.   ?>  
  112.  
  113. <script language="JavaScript">  
  114.  
  115.  updateProgress("正在操作用户 <?php echo $user; ?> ....", <?php echo min($widthintval($progress)); ?>); 
  116.  
  117. </script> 
  118.  
  119. <?php 
  120.  
  121.   flush(); //将输出发送给客户端浏览器,使其可以立即执行服务器端输出的 JavaScript 程序。  
  122.  
  123.   $progress += $pix
  124.  
  125. //end foreach  
  126.  
  127. ?>  
  128.  
  129. <script language="JavaScript">  
  130.  
  131.   //最后将进度条设置成最大值 $width,同时显示操作完成  
  132. //phpfensi.com 
  133.  updateProgress("操作完成!", <?php echo $width; ?>);  
  134.  
  135. </script> 
  136.  
  137. <?php 
  138.  
  139. flush(); 
  140.  
  141. ?> 

Tags: PHP进度条效果

分享到: