<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.spa{ font-size:12px; color:#0066ff;}
.put{ font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;}
.put2{ font-size:12px; color:#0066ff; text-align:center; border-width:medium; border-style:none;}
</style>
</head>
<body>
<div id="up">
<span class="spa">载入中，请稍后。。。。</span>
<input id="chart" type="text" size="54" class="put" readonly="readonly" />
<input id="percent" type="text" size="20" class="put2" readonly="readonly" />
</div>
<div id="ff">
<form name="upload" method="post" action="">
<input type="file" id="f" size="30" />
<input type="button" id="b" value="上传" onclick="count()" />
</form>
<script language="javascript">
var bar=0;
var line="||";
var amount="";
document.getElementById("up").style.display="none";
function count(){
var f=document.getElementById("f");
var b=document.getElementById("b");
b.disabled=true;
f.disabled=true;
if(f.value==""){
b.disabled=false;
f.disabled=false;
alert("请添加上传文件");
return false;
}
document.getElementById("up").style.display="inline";
bar=bar+2;
amount=amount+line;
document.getElementById("chart").value=bar+"%";
if(bar<99){
setTimeout("count()",200);
}
else{
b.disabled=false;
f.disabled=false;
alert("加载完毕")
document.getElementById("up").style.display="none";
}
}
</script>
</div>
</body>
</html>
分享到：
相关推荐
本教程将详细讲解如何使用jQuery库来模拟页面加载进度条。 首先，jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery的易用性和丰富的功能使其成为创建动态网页的强大...
在这个“JS 模拟上传进度条”的示例中，我们将探讨如何使用JavaScript实现这个功能。 首先，我们需要理解上传进度条的基本原理。在HTML5中，`<input type="file">`元素提供了文件选择的功能，而FileReader API则...
在本文中，我们将深入探讨如何使用jQuery实现数据加载进度条效果。这个代码示例是基于jQuery库的2.1.0版本，包含了四种不同的进度条动画特效，为用户提供了丰富的视觉体验，使得网页上的数据加载过程更加友好和吸引...
通过查看和分析这个文件，我们可以学习到具体的实现方式，包括如何计算加载进度、如何用CSS创建动画以及如何将两者结合以实现页面加载进度条的效果。如果你想要进一步了解或实现这样的效果，建议打开并研究这个示例...
例如，用Canvas绘制自定义形状的进度条，或者使用Web Animations API创建更精细的动画控制。 总的来说，通过结合HTML5的`<progress>`元素、CSS3的过渡和动画，以及JavaScript的动态更新，我们可以轻松创建出各种...
"仿微信网页加载进度条"是一种模拟微信应用中加载页面时显示的进度指示器，它通常用于显示网页或内容加载的进度，给用户一个可视化的等待反馈，减少用户的焦虑感。在本文中，我们将深入探讨如何实现这样的功能，并...
"jquery动态页面加载进度条"就是一种优化用户体验的工具，它通过在页面加载过程中展示一个直观的进度条，让用户知道页面正在加载并估计加载完成的时间，从而减少用户的等待焦虑感。这个插件基于JavaScript库jQuery...
本教程将详细讲解如何利用jQuery这一强大的JavaScript库来实现动态加载进度条。 首先，jQuery是一个轻量级、高性能的JavaScript库，它的API简洁易用，使得开发者能轻松实现复杂的前端交互效果。在实现动态加载...
SwfUploadDemo这个文件可能是一个示例项目，它使用了Flash技术（SWF文件）来实现上传功能。在过去，Flash常用于跨浏览器的文件上传，因为当时HTML5的File API并不广泛支持。SwfUpload是一个开源库，它可以模拟多文件...
要查看和学习这个加载进度条的具体实现，你需要解压文件并打开对应的代码文件进行查看和分析。 总结来说，"Loading网页加载进度条动画效果.zip"是一个结合了jQuery和CSS3技术的网页加载动画解决方案，它通过优雅的...
在微信小程序中，canvas是用于绘制图形的重要组件，它可以让我们实现各种复杂的动态效果，比如本例中的“动态加载进度条”。下面将详细讲解如何利用canvas实现这样的功能。 首先，我们需要了解canvas的基本用法。...
在IT行业中，动态加载进度条是用户界面设计中不可或缺的一部分，特别是在大文件上传、下载或者复杂数据处理时，它能够提供用户体验的流畅感，让用户了解任务的进展状态。本资源"加载进度条loading动态效果ppt模板....
【标题】中的“基于jQuery实现滑动加载进度条特效源码”表明这是一个使用JavaScript库jQuery创建的、用于显示页面加载进度的动态效果。在网页开发中，这种特效通常用于提升用户体验，让用户能够可视化地了解数据加载...
在本文中，我们将深入探讨如何使用PHP和JavaScript（特别是jQuery）通过XMLHttpRequest对象来实现视频文件的模拟表单上传，并且在上传过程中显示进度条，以及上传完成后自动加载和播放视频的功能。 首先，我们需要...
2. **修改CSS属性**：用JavaScript改变CSS的`width`属性，模拟加载进度的增加，从而实现进度条的动态变化。 3. **延迟与定时器**：使用`setTimeout`或`setInterval`函数，控制进度条的更新速度，模拟真实加载过程。 ...
综上所述，"进度条完美加载进度条"项目提供了一种使用JavaScript和`setTimeout`实现动态进度条的方法，并通过`loader.js`进行了封装，使得在实际应用中调用和管理加载过程变得更加简单和高效。这种技术在网页或应用...
最后，我们使用`setInterval()`函数每隔一定时间（比如100毫秒）调用`drawProgress()`，模拟加载过程： ```javascript var timer = setInterval(drawProgress, 100); ``` 这样，我们就创建了一个简单的加载条，...
在网页设计中，进度条是一种常见的用户界面元素，它用于显示任务或操作的完成状态，如数据加载、文件上传或处理过程。"伪进度条"是利用JavaScript实现的一种视觉效果，它并不直接与后台进程关联，而是通过模拟进度来...