Ajax+PHP实现的模拟进度条功能示例
时间:2022-07-27
本文章向大家介绍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);
?
二 运行结果
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法