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,進度條