當前位置:首頁 > 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進度條效果

分享到:

天气网首页彩吧