ホームページ > バックエンド開発 > PHPチュートリアル > プログレスバーケースの PHP 実装

プログレスバーケースの PHP 実装

墨辰丷
リリース: 2023-03-25 22:36:01
オリジナル
1337 人が閲覧しました

この記事では主に PHP を使用してプログレスバーを実装する方法の小さな事例を紹介します。興味のある方はぜひ参考にしてください。

コードは次のとおりです:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

<?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,div 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>

  <div style="margin:50px auto; padding: 8px; border: 1px solid gray; background: #EAEAEA; width: <?php echo $width+8; ?>px">

    <div style="padding: 0; background-color: white; border: 1px solid navy; width: <?php echo $width; ?>px">

      <div id="progress"

        style="padding: 0; background-color: #FFCC66; border: 0; width: 0px; text-align: center; height: 16px"></div>

    </div>

    <div id="status"></div>

    <div id="percent"

      style="position: relative; top: -30px; text-align: center; font-weight: bold; font-size: 8pt">0%</div>

  </div>

<?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

ログイン後にコピー

関連する推奨事項:

jqueryファイルのドラッグアップロード読み込みプログレスバーの追加

モバイル側でのシンプルなプログレスバーの実装

HTML5タッチイベントの実装方法モバイル側のシンプルな進行状況バー

以上がプログレスバーケースの PHP 実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
PHP 拡張子 intl
から 1970-01-01 08:00:00
0
0
0
phpのデータ取得?
から 1970-01-01 08:00:00
0
0
0
PHP GET エラー レポート
から 1970-01-01 08:00:00
0
0
0
phpを上手に学ぶ方法
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート