<!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>
分享到：
相关推荐
php+js使用XMLHttpRequest通过js模拟表单提交上传视频同时实现进度条展示，上传后自动加载并播放功能。
2.怎么实现进度条呢？ 1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index = 999. 加载的时候让用户无法修改界面值 2) 在document.body 新增一个动态的div. 代码实现: Main.html: <!...
同时整个网页顶部带有加载进度条 使用方法： 1、首先在你的网页中引入lanrenzhijia.css样式以及jQuery库和html5代码 2、将代码部分拷贝到你需要的网页中即可(主意保持路径正确) 3、网页图片路径保存在...
故这里只用js的setInterval模拟加载效果 原理就是不断改变CSS中内部一个div的宽度以此达到加载的样式效果 使用方法： 1、将CSS样式拷贝到你的网页中 2、将body中需要的代码部分拷贝到你需要的地方即可
roundcorner.css JavaScript使用CSS模拟图片的圆角效果时使用的CSS样式文件。 第13章（\c13） 示例描述：介绍JavaScript与XML。 13.1.xml 表示书籍信息的XML信息。 13.2.js 跨浏览器兼容的XPath实现。 ...
3.vue-lazyload实现图片懒加载 4.nanoid生成临时唯一id,实现游客模式访问商城（与此类似的有uuid） 5.mock.js在开发未完成时，模拟服务器返回静态数据 6.swiper.js轻量级的轮播图插件 7.lodrash是一个著名的...
页面加载进度条 项目使用 # 安装项目依赖 npm install # 开启本地服务，默认为localhost:9000 npm run dev # 项目打包，构建生产环境 npm run build # 打包过程中想查看具体报告则可以通过以下命令实现 npm run ...
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
效果描述： 一个非常简单的纯js实现的loading动画效果 由于没有实际的进度显示 故这里只用js的setInterval模拟加载效果 原理就是不断改变CSS中内部一个div的宽度以此达到加载的样式效果 使用方法： 1、将CSS样式拷贝...
程序用Jsp作为客户端，发送异步请求到Servlet，Servlet模拟数据库操作，返回结果，客户端解析，利用JavaScript的dom技术动态创建标签，加以显示。程序内容涵盖ajax基础知识，详细讲解xmlHttpRequest对象，还介绍了...
01 selctors实现文件上传与下载 02 html的介绍 03 html文档树的概念 04 meta标签以及一些基本标签 05 img标签和列表标签 06 form表单之input标签 07 通过form向server端发送数据 08 form表单之select标签 09 table...
React组件-显示加载栏并模拟进度 Redux Reducer —管理商店中的加载栏 （可选）Redux中间件-自动显示和隐藏带有承诺的操作的加载栏 例子 请参阅或其。 安装 npm install --save react-redux-loading-bar 用法 在...
|--Json读js资源文件 |--layout布局样式之style配置 |--listview 页面 图片加文字 |--ListView之CursorAdapter异步查询框架之短信 |--ListView之动态添加子view |--ListView优化之分页加载 |--ListView优化之动态...
鼠标拖动图片滚动（利用translate来实现） js复制粘贴功能 模拟vue双向绑定 节流（每1.5s执行一次，结束后2s执行一次，不同的节流需求） 瀑布流（方法2 瀑布流） 2.css特效 红包 加载中 吃豆人 立方体 水浪 文字走光...
jsmoduleJS组件########轮播图片、支持手机滑动#仿ajax上传文件iframe#点击的进度条#文本框计数统计#图片的懒加载#本地缓存localStorage#pc地区联动选择area#图片放大镜#ajax分页插件paging#url参数和表单json参数#...
毒牙的vue代码世界在茫茫人海中，你只给别人...i18n语言化处理模拟JJ模拟后台接口axios http请求nprogress加载页面进度条纸vuex管理商店vue-router vue路由iview前端ui框架js cookie cookie vue-canvas-effect canvas动
进度条中存放的是默认日期或指定日期之后的10天2018/4/7 11:15:05添加图例（模拟数据【占位显示】，写死--待修改）根据数据库动态创建下拉菜单获取后台geojson并根据属性值域进行渲染（值域动态，渲染颜色固定）加载...
是官方提供的路由器，使用vue.js构建单页面应用程序变得轻而易举。 请求数据，服务器通讯。 是一个专为 vue.js 应用程序开发的状态管理模式，简单来说Vuex就是管理数据的。 一套为开发者、设计师和产品经理准备...