- 浏览: 49503 次
- 性别:
- 来自: 北京
最新评论
-
hanxiao84322:
强大啊,虽然没有完全看明白。
YUI 3.0应用初探 -
osacar:
不行啊。没效果!在Opera下测试
IE也不行。
JS iframe跨域自适应内容高度 -
xxzjzb1:
中秋送礼,首选书画、艺术品交易平台爱艺购!
JS将数字转换成三位逗号分隔的样式 -
mozart0:
货币:num.toFixed(2).replace(/(\d) ...
JS将数字转换成三位逗号分隔的样式 -
cnxxg:
这样能处理一个元素含有多个classname的情况吗?
javascript 整合的获取ID,className,tagName的方法
<!doctype html public "-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>JS模擬上傳進度條</title> </head> <body> </body> <script type="text/javascript"> var bind = function(obj,func){ return function(){ func.apply(obj,arguments); }; }; var uploadBAR=function(container){ container=(!document.getElementById(container))?this.createContainer(container):document.getElementById(container); this.ostart = container.getElementsByTagName('input')[0]; this.oinit = container.getElementsByTagName('input')[1]; this.container=container; this.nBar=container.id+'_uploadBAR'; this.total=95; }; uploadBAR.prototype = { addEventHandler:function(obj, type, func) { if(!obj){return;} if(obj.addEventListener){obj.addEventListener(type, func, false);} else if(obj.attachEvent){obj.attachEvent("on" + type, func);} else{obj["on" + type] = func;} }, on:function(e){ this.addEventHandler(this.ostart,'click',bind(this,this.start)); this.addEventHandler(this.oinit,'click',bind(this,this.init)); }, init:function(e){ this.oinit.blur(); if(this.up!=undefined){ clearInterval(this.up); } this.x=this.y=0; this.ostart.value='start'; this.ostart.disabled=false; if(document.getElementById(this.nBar)){ var pBar=document.getElementById(this.nBar).parentNode; pBar.removeChild(document.getElementById(this.nBar)); if(pBar.getElementsByTagName('div').length==0){document.body.removeChild(pBar);} } }, setTime:function(){ this.x++; }, createContainer:function(oName){ var buildStart=document.createElement('input'); buildStart.value='start'; buildStart.type='button'; var buildInit=document.createElement('input'); buildInit.value='init'; buildInit.type='button'; var oDIV=document.createElement('div'); oDIV.id=oName; oDIV.appendChild(buildStart); oDIV.appendChild(buildInit); document.body.appendChild(oDIV); buildStart=buildInit=null; return oDIV; }, createBAR:function(){ if(document.getElementById(this.nBar)!=undefined){return;} if(document.getElementById('bar_container')==undefined){ var Barcontainer=document.createElement('div'); Barcontainer.id="bar_container"; Barcontainer.style.width="200px"; Barcontainer.style.border="1px solid #999"; Barcontainer.style.backgroundColor="#ccc"; Barcontainer.style.overflowX="hidden"; Barcontainer.style.position=(document.all)?"absolute":"fixed"; var bHeight=(document.documentElement.clientHeight-18)/2+"px", bWeight=(document.documentElement.clientWidth-parseInt(Barcontainer.style.width))/2+"px"; Barcontainer.style.top=bHeight; Barcontainer.style.left=bWeight; document.body.appendChild(Barcontainer); } var newBar=document.createElement('div'); newBar.innerHTML=' '; newBar.id=this.nBar; newBar.style.border="5px solid #ccc"; document.getElementById('bar_container').appendChild(newBar); }, setBAR:function(xx){ var BAR=document.getElementById(this.nBar); BAR.style.backgroundColor=(xx==100)?"#00ff00":"#333"; BAR.style.width = xx+"%"; BAR.style.textAlign="center"; BAR.style.color = "#FFF"; BAR.style.fontWeight = "bold"; if(xx==this.total){ BAR.innerHTML = "complete"; this.ostart.value='start'; this.ostart.disabled=true; setTimeout(bind(this,this.init),1000); } }, go:function(xx){ var ostart=this.ostart,x=this.x,total=this.total,_x=bind(this,this.setTime),_bar=bind(this,this.setBAR); this.up=setInterval(function(){ if(x<total){ x++; _x(); } else{ var _up=bind(this,this.up); clearInterval(_up); this.value=='start'; this.disabled=true; } _bar(x); },10); }, run:function(){ this.ostart.blur(); if(this.x==undefined||this.x==this.total){this.x=0;this.y=0;} this.ostart.value=(this.ostart.value=='start')?"pause":"start"; this.y++; clearInterval(this.up); if(this.y>1){this.y=0;return;} this.go(this.x); }, start:function(){ var createBAR=bind(this,this.createBAR); var run=bind(this,this.run); createBAR(); run(); } }; var bar1=new uploadBAR('upload'); bar1.on(); var bar2=new uploadBAR('upload1'); bar2.on(); </script> </html>
评论
6 楼
ziyu_1
2009-11-19
以前写过一个ajax轮询到后台查询进度然后返回显示
5 楼
pengsuyun
2009-11-18
不错,学习学习
4 楼
ayue222
2009-11-18
tobeno1 写道
逻辑看懂了,可是没运行出来
看看你的文件本身編碼是否為utf-8無bom,如果是gb2312就不行了
3 楼
wyh6635
2009-11-18
楼猪怎么不给出个效果图。。。。。。
2 楼
tobeno1
2009-11-18
逻辑看懂了,可是没运行出来
1 楼
tobeno1
2009-11-18
8错,8错
发表评论
-
使用javascript动态创建SVG对象的问题
2011-04-24 01:04 2246如何在html中操作SVG对象的问题,对于嵌入式<emb ... -
YUI3 事件
2011-04-23 20:02 1579YUI3:事件 YUI的事件功能为响应DOM事件提供一个简单 ... -
直接运行html的代码
2010-12-07 17:19 888function runCode(pTargetId){ v ... -
JS正则表达式详解
2010-10-28 10:12 978JS的正则表达式 //校验是否全由数字组成 代码 va ... -
如何在事件代理中正确使用 focus 和 blur 事件
2010-10-21 22:09 1635什么是事件代理(Event Delegation)? 如果不 ... -
如何判断脚本加载完成
2010-10-21 22:04 967在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一 ... -
JavaScript 获取事件对象的一个注意点
2010-10-21 22:00 975平时我们获取事件对象一般写法如下: function get ... -
判断 iframe 是否加载完成的完美方法
2010-10-21 21:52 975var iframe = document.createEle ... -
JS将数字转换成三位逗号分隔的样式
2010-08-02 16:33 3797function formatNumber(num){ ... -
YUI 3.0应用初探
2010-06-04 22:42 1371很惭愧。。。YUI3出来这么久了,一直都没有机会正式使用。。这 ... -
JS iframe跨域自适应内容高度
2010-02-24 11:05 2800<!DOCTYPE html PUBLIC " ... -
话说browser的脚本并行下载
2009-12-12 13:32 1381在讨论这次的主题 ... -
初涉YUI3
2009-12-11 13:44 1174study.html <!DOCTYPE HTML ... -
基於YUI2.8的 JS版多文件上传
2009-12-11 12:41 964select files: uploading: ... -
自定义滚动条
2009-11-12 19:42 985<!DOCTYPE html PUBLIC " ... -
javascript 整合的获取ID,className,tagName的方法
2009-11-12 19:40 2568var get=function(className, tag ... -
javascript 中绑定事件监听的函数【支持数组对象绑定】
2009-11-12 19:38 1209var addEventHandler=function(ob ... -
判断指定对象是否存在于另一个对象的原型链中
2009-11-12 19:35 992prototype 下的 isPrototypeOf() 方法 ... -
基于yui3如何写模块(一)
2009-11-12 19:33 956如今的前端开发越来越oo,也越来越注重重用,娴熟的用js写出o ... -
Js 数组排序【支持对象】
2009-11-12 19:30 1114//兼容 IE&FF&Safari var ...
相关推荐
在这个“JS 模拟上传进度条”的示例中,我们将探讨如何使用JavaScript实现这个功能。 首先,我们需要理解上传进度条的基本原理。在HTML5中,`<input type="file">`元素提供了文件选择的功能,而FileReader API则...
总结来说,模拟上传进度条的关键在于利用`XMLHttpRequest`或`Fetch API`的`upload`事件监听上传进度,并更新前端的UI。同时,为了确保跨域请求的成功,服务器端需要配置合适的CORS策略。这只是一个基础的实现,实际...
在这个"JS模拟进度条.zip"压缩包中,可能包含了一个名为"jiaoben18598"的文件,这可能是实现进度条功能的源代码或示例。 在JavaScript中,模拟进度条通常涉及以下几个关键知识点: 1. **HTML结构**:首先,我们...
- 包含文件输入框`<input type="file" id="f">`和一个按钮`ϴ" onclick="count()">`,按钮点击后触发`count()`函数开始模拟上传过程。 #### 四、JavaScript逻辑分析 - **全局变量定义**: - `bar`: 当前进度(以...
"伪进度条"是利用JavaScript实现的一种视觉效果,它并不直接与后台进程关联,而是通过模拟进度来提供用户体验上的反馈。这种特效可以增加用户对网站交互的感知,提高其满意度。下面我们将详细讨论如何使用JavaScript...
【标题】:“简单的进度条模拟.zip”所包含的是一个关于如何使用HTML和JavaScript在网页上创建简单进度条的示例项目。这个项目的核心是利用这两种技术来动态展示数据处理或加载的状态,为用户提供视觉反馈。 【描述...
本篇文章将深入探讨如何使用JavaScript实现上传文件的进度条功能。 首先,我们需要理解HTML5引入的File API,它是实现文件上传进度的关键。File API允许我们访问和操作用户选择的文件,包括读取文件内容、获取文件...
通过以上步骤,我们可以成功地使用JavaScript模拟出Vista风格的进度条。这种技术不仅可以用于上传下载的进度指示,还可以用于加载页面内容、游戏进度等场景,提升用户的交互体验。同时,这也展示了JavaScript在前端...
"js 进度条"是使用JavaScript编程语言实现的这类动态效果,通过改变HTML元素的样式或属性来模拟进度的变化。 在压缩包中,我们可以看到以下几个文件: 1. `1.gif`、`3.jpg`、`3Bg.jpg`、`2.jpg`:这些通常是进度条...
本文将详细解析如何利用PHP和JavaScript(JS)结合实现文件上传过程中的进度条操作,这不仅提升了用户交互体验,还使得整个上传过程更加透明可控。 ### PHP与JS实现进度条的原理 在Web应用中,文件上传通常是由...
在处理过程中,我们可以通过JavaScript或者AJAX技术来更新前端的进度条,展示文件上传的进度。 1. **前端界面设计**: - 使用HTML5的`<input type="file">`元素让用户选择图片。 - 创建一个进度条元素,如`...
"js完美进度条"正是这样一个解决方案,它利用JavaScript语言为网页增添视觉吸引力,为用户展示任务执行或数据加载的过程。本文将深入探讨如何利用JavaScript实现一个完美的进度条效果,并分享相关知识点。 首先,...
总的来说,"js一个非常实用好看得进度条"项目提供了一个方便的工具,它结合了JavaScript的动态性与CSS的视觉表现力,创建出了一款适应多种现代浏览器的进度条组件。开发人员可以根据自己的需求对其进行自定义,以...
在IT行业中,尤其是在网页开发领域,进度条是一个常见的交互元素,用于给用户展示某个操作的进行状态,如数据加载、文件上传或下载等。本文将深入探讨如何利用jQuery实现一个模拟进度条的实例,帮助开发者提升用户...
在Java Web开发中,实现一个模拟数据导入或文件上传进度条功能可以极大提升用户体验,让用户在等待过程中心中有数。这个功能通常涉及到前端与后端的交互,涉及到的技术包括Servlet、JSP、jQuery和Ajax。下面我们将...
例如,当用户发起一个大文件上传请求时,后台处理文件的同时,前端可以通过JavaScript实时更新进度条,让用户知道任务的进度,提高用户的等待感知。 为了实现这样一个动态进度条,开发者需要做以下步骤: 1. 引入...
由于HTTP协议本身的限制,文件上传不支持进度显示,所以通常需要借助JavaScript或者Flash等技术在客户端模拟进度条。 2. ASP上传组件: ASP文件上传通常需要借助组件,例如:`CFUpload`、`SmartUpload`等。这些...
这种方案不仅能够实时展示文件上传进度,还能够模拟出类似QQ邮箱等知名平台的大文件上传窗体功能,极大地提升了用户体验。 #### 二、关键技术点分析 **1. SSH框架简介** - **Struts**:用于构建MVC架构的Web应用...
- 使用这些信息更新进度条的宽度或填充,模拟上传进度。 - 当`onload`或`onerror`事件触发时,停止进度条动画,表示上传完成或出现错误。 5. **安全和性能考虑**: - 为了避免跨站脚本攻击(XSS)和跨站请求伪造...
- 为了实现进度条,我们需要借助前端JavaScript和AJAX来模拟进度。 5. **前端技术** - 使用AJAX异步上传,配合XMLHttpRequest对象,可以在后台处理文件上传,同时更新进度条信息。 - JavaScript或jQuery监听表单...