Heim > Artikel > Backend-Entwicklung > Beispielcode für den Fortschrittsbalken, implementiert in PHP

Beispielcode für den Fortschrittsbalken, implementiert in PHP

怪我咯Original: 2017-07-23 10:57:232039Durchsuche

Der Fortschrittsbalken zeigt die Geschwindigkeit der Bearbeitung der Aufgabe, den Grad der Fertigstellung, die Größe der verbleibenden unvollendeten Aufgaben und die mögliche Bearbeitungszeit in Form von Bildern in Echtzeit an, wenn der Computer eine Aufgabe verarbeitet . Es wird normalerweise in Form eines rechteckigen Balkens angezeigt. Dieser Artikel stellt hauptsächlich den von PHP implementierten Fortschrittsbalkeneffekt vor. Er analysiert die Funktion von PHP und JavaScript zur dynamischen Anzeige des prozentualen Fortschrittsbalkens in Form von Beispielen. Er umfasst PHP-Caching, mathematische Operationen und Kenntnisse im Zusammenhang mit der dynamischen Bedienung von JavaScript-Seitenelementen Bedürftige können sich darauf beziehen. Die Einzelheiten lauten wie folgt:

<?php
//防止执行超时
set_time_limit(0);
//清空并关闭输出缓存
ob_end_clean();
//需要循环的数据
for($i = 0; $i < 188; $i++)
{
  $users[] = &#39;Tom_&#39; . $i;
}
//计算数据的长度
$total = count($users);
//显示的进度条长度，单位 px 
$width = 500;
//每条记录的操作所占的进度条单位长度
$pix = $width / $total;
//默认开始的进度条百分比
$progress = 0;
?>
<html>
<head>
<title>动态显示服务器运行程序的进度条</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body,p input {
  font-family: Tahoma;
  font-size: 9pt
}
</style>
<script language="JavaScript">
 <!-- 
 function updateProgress(sMsg, iWidth) 
 { 
  document.getElementById("status").innerHTML = sMsg; 
  document.getElementById("progress").style.width = iWidth + "px"; 
  document.getElementById("percent").innerHTML = parseInt(iWidth / <?php echo $width; ?> * 100) + "%"; 
  } 
 --> 
 </script>
</head>
<body>
  <p style="margin:50px auto; padding: 8px; border: 1px solid gray; background: #EAEAEA; width: <?php echo $width+8; ?>px">
    <p style="padding: 0; background-color: white; border: 1px solid navy; width: <?php echo $width; ?>px">
      <p id="progress"
        style="padding: 0; background-color: #FFCC66; border: 0; width: 0px; text-align: center; height: 16px"></p>
    </p>
    <p id="status"></p>
    <p id="percent"
      style="position: relative; top: -30px; text-align: center; font-weight: bold; font-size: 8pt">0%</p>
  </p> 
<?php
flush(); //将输出发送给客户端浏览器 
foreach($users as $user)
{
  // 在此处使用空循环模拟较为耗时的操作，实际应用中需将其替换； 
  // 如果你的操作不耗时，我想你就没必要使用这个脚本了 :) 
  for($i = 0; $i < 1000000; $i++)
  {
  }
  ?> 
<script language="JavaScript"> 
 updateProgress("正在操作用户 <?php echo $user; ?> ....", <?php echo min($width, intval($progress)); ?>);
</script>
<?php
  flush(); //将输出发送给客户端浏览器，使其可以立即执行服务器端输出的 JavaScript 程序。 
  $progress += $pix;
} //end foreach 
?> 
<script language="JavaScript"> 
  //最后将进度条设置成最大值 $width，同时显示操作完成 
 updateProgress("操作完成！", <?php echo $width; ?>); 
</script>
<?php
flush();
?>
</body>
</html>

Das obige ist der detaillierte Inhalt vonBeispielcode für den Fortschrittsbalken, implementiert in PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Analyse des reversiblen Verschlüsselungsalgorithmus PHP mcrypt()Nächster Artikel：Analyse des reversiblen Verschlüsselungsalgorithmus PHP mcrypt()

In Verbindung stehende Artikel

Mehr sehen