Ajax+PHP实现的模拟进度条功能示例

2024-05-05 00:06:32

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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);?>

二运行结果

Ajax,PHP,进度条