- 浏览: 48263 次
- 性别:
- 来自: 北京
最新评论
-
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 2199如何在html中操作SVG对象的问题,对于嵌入式<emb ... -
YUI3 事件
2011-04-23 20:02 1534YUI3:事件 YUI的事件功能为响应DOM事件提供一个简单 ... -
直接运行html的代码
2010-12-07 17:19 860function runCode(pTargetId){ v ... -
JS正则表达式详解
2010-10-28 10:12 931JS的正则表达式 //校验是否全由数字组成 代码 va ... -
如何在事件代理中正确使用 focus 和 blur 事件
2010-10-21 22:09 1603什么是事件代理(Event Delegation)? 如果不 ... -
如何判断脚本加载完成
2010-10-21 22:04 930在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一 ... -
JavaScript 获取事件对象的一个注意点
2010-10-21 22:00 918平时我们获取事件对象一般写法如下: function get ... -
判断 iframe 是否加载完成的完美方法
2010-10-21 21:52 925var iframe = document.createEle ... -
JS将数字转换成三位逗号分隔的样式
2010-08-02 16:33 3768function formatNumber(num){ ... -
YUI 3.0应用初探
2010-06-04 22:42 1326很惭愧。。。YUI3出来这么久了,一直都没有机会正式使用。。这 ... -
JS iframe跨域自适应内容高度
2010-02-24 11:05 2777<!DOCTYPE html PUBLIC " ... -
话说browser的脚本并行下载
2009-12-12 13:32 1342在讨论这次的主题 ... -
初涉YUI3
2009-12-11 13:44 1144study.html <!DOCTYPE HTML ... -
基於YUI2.8的 JS版多文件上传
2009-12-11 12:41 926select files: uploading: ... -
自定义滚动条
2009-11-12 19:42 959<!DOCTYPE html PUBLIC " ... -
javascript 整合的获取ID,className,tagName的方法
2009-11-12 19:40 2540var get=function(className, tag ... -
javascript 中绑定事件监听的函数【支持数组对象绑定】
2009-11-12 19:38 1182var addEventHandler=function(ob ... -
判断指定对象是否存在于另一个对象的原型链中
2009-11-12 19:35 962prototype 下的 isPrototypeOf() 方法 ... -
基于yui3如何写模块(一)
2009-11-12 19:33 933如今的前端开发越来越oo,也越来越注重重用,娴熟的用js写出o ... -
Js 数组排序【支持对象】
2009-11-12 19:30 1081//兼容 IE&FF&Safari var ...
相关推荐
简单用JS模拟上传进度条,没有用到后台页面,但是运行时需要服务器支持,否则会存在跨域问题。
这是一个模拟的文件上传的进度条;大家可以看看
php+js使用XMLHttpRequest通过js模拟表单提交上传视频同时实现进度条展示,上传后自动加载并播放功能。
jquery+jquery.uploadify.js插件,实现无刷新上传文件 支持ie6,模拟进度条(模拟进度条,非正式进度) 无刷新上传 ashx处理.
13,TABLAE相关(客户端动态增加行列,模拟进度条,滚动列表等) 14,各种<object classid=>相关类,如播放器,flash与脚本互动等 16, 刷新/模拟无刷新 异步调用类(XMLHttp或iframe,frame)
包括: 一、验证类 1、数字验证内 ...13,TABLAE相关(客户端动态增加行列,模拟进度条,滚动列表等) 14,各种相关类,如播放器,flash与脚本互动等 16, 刷新/模拟无刷新 异步调用类(XMLHttp或iframe,frame)
一、验证类 1、数字验证内 ...13,tablae相关(客户端动态增加行列,模拟进度条,滚动列表等) 14,各种相关类,如播放器,flash与脚本互动等 16, 刷新/模拟无刷新 异步调用类(xmlhttp或iframe,frame)
13,tablae相关(客户端动态增加行列,模拟进度条,滚动列表等) 14,各种<object classid=>相关类,如播放器,flash与脚本互动等 16, 刷新/模拟无刷新 异步调用类(xmlhttp或iframe,frame)
jsmoduleJS组件########轮播图片、支持手机滑动#仿ajax上传文件iframe#点击的进度条#文本框计数统计#图片的懒加载#本地缓存localStorage#pc地区联动选择area#图片放大镜#ajax分页插件paging#url参数和表单json参数#...
程序描述:本章使用Prototype封装的Ajax对象实现上传文件时显示进度条的功能。当上传文件时,客户端同时显示文件上传的进度,从而及时了解文件传送情况。 /test.html 上传文件 /periodcal.jsp 上传文件...
49: Ajax+PHP打造等待进度条效果(二) 50: Ajax+PHP检查用户名或邮件(三) 51:PHP+MYSQL会员系统的开发(上) P100视频教程52:PHP+MYSQL会员系统的开发(下) 53:PHP如何防止注入及开发安全 54:Apache Rewrite...
目录 第1篇 基础篇 第1章 开发环境 2 ...实例002 AppServ应用技巧 6 ...实例005 测试XAMPP是否安装成功 11 实例006 XAMPP应用技巧 12 ...实例038 动态输出JavaScript代码 69 ...实例191 模拟的进度条 231 实例192
python入门到高级全栈工程师培训视频学习资料;本资料仅用于学习,请查看后24小时之内删除。 【课程内容】 第1章 01 计算机发展史 ...15 再插两道JavaScript面试题 16 Model操作之select_related以及...
PHP100视频教程49: Ajax+PHP打造等待进度条效果(二) PHP100视频教程50: Ajax+PHP检查用户名或邮件(三) PHP100视频教程51:PHP+MYSQL会员系统的开发(上) PHP100视频教程52:PHP+MYSQL会员系统的开发(下) ...
JavaScript万年历 显示出当前时间及年份,还可以选择年份及月份和日期 Java编写的HTML浏览器 一个目标文件 摘要:Java源码,网络相关,浏览器 Java编写的HTML浏览器源代码,一个很简单甚至不算是浏览器的HTML浏览器...
9.37、通过ANDROID 客户端上传数据到服务器 251 9.38、文件下载类 255 9.39、下载文件的进度条提示 263 9.40、通过HTTPCLIENT从指定SERVER获取数据 265 9.41、通过FTP传输文件,关闭UI获得返回码 266 9.42、激活...
9.37、通过ANDROID 客户端上传数据到服务器 251 9.38、文件下载类 255 9.39、下载文件的进度条提示 263 9.40、通过HTTPCLIENT从指定SERVER获取数据 265 9.41、通过FTP传输文件,关闭UI获得返回码 266 9.42、激活...
JavaScript万年历 显示出当前时间及年份,还可以选择年份及月份和日期 Java编写的HTML浏览器 一个目标文件 摘要:Java源码,网络相关,浏览器 Java编写的HTML浏览器源代码,一个很简单甚至不算是浏览器的HTML浏览器...
实例191 模拟的进度条 231 实例192 标签设计用户注册页面 232 实例193 div标签设计论坛帖子浏览页面 234 实例194 标签设计论坛后台管理页面 236 实例195 标签设计页面布局 237 实例196 页面布局(2列左窄右宽高度...
实例191 模拟的进度条 231 实例192 标签设计用户注册页面 232 实例193 div标签设计论坛帖子浏览页面 234 实例194 标签设计论坛后台管理页面 236 实例195 标签设计页面布局 237 实例196 页面布局(2列左窄右宽高度...