Ajax+PHP实现的模拟进度条功能示例-华尔子博-奥夏网

Ajax+PHP实现的模拟进度条功能。具体如下：

一代码

fun.js：

  function progress(){    setInterval("beginProgress()", 200);  }  function beginProgress(){    $.get("progress.php", null, function(data){       $("#pg").css("width", data+"%");       $("#pgtext").html("The progress is "+data+"%");    });  }

index.php：

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>jQuery制作进度条</title>  </head>  <script language="javascript" src="js/jquery-1.3.2.js"></script>  <script language="javascript" src="js/fun.js"></script>  <body>  <div style="width:200px; height:12px; border:1px solid #0000FF">    <div id="pg" style="width:0%; height:100%;background-color:#0000FF"></div>  </div>  <br>  <div id="pgtext" style="width:100px; height:20px"></div>  <br>  <input type="button" value="开始" onclick="progress()" />  </body>  </html>

progress.php：

  <?php  $file = "./count.txt";  $fp = fopen($file, "r");  $txt = fread($fp, filesize($file));  echo $txt;  $fp1 = fopen($file, "w");  if($txt<100){    $txt++;    fwrite($fp1, $txt);  }else{    fwrite($fp1, 1);  }  fclose($fp1);  fclose($fp);  ?>

本文刊载的所有内容，包括文字、图片、音频、视频、软件、程序、以及网页版式设计等部门来源于互联网，版权均归原作者所有！本网站提供的内容服务于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯本网站及相关权利人的合法权利。
联系信息：邮箱aoxolcom@163.com或见网站底部。

THE END