进度条 body{ text-align:center; } .graph{ width:450px; border:1px solid #F8B3D0; height:25px; } #bar{ display:block; background:#FFE7F4; float:left; height:100%; text-align:center; } #barNum{ position:absolute; } function $(obj){ return document.getElementById(obj); } function go(){ $("bar").style.width = parseInt($("bar").style.width) + 1 + "%"; $("bar").innerHTML = $("bar")...
我们先看看最终效果： 第一步，基本 构建基本的代码，看效果演示： 制作进度条的两种方法 *{ margin:0; padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{ font-size: 12px; margin:40px auto; width:400px; } /*进度条样式*/ .progressbar_1{ background-color:#eee; height:16px; width:150px; border:1px solid #bbb; color:#222; } .progressbar_1 .bar { background-color:#6CAF00; height:16px; width:...
代码如下:[code] var loading = { element: null, count: 0, ID: 0, createLoading: function(parent, width, height){ //用于生成外围的进度条框 loading.element = document.createElement("div"); loading.element.id = "loading"; loading.element.className = "loading"; loading.element.style.height = height; loading.element.style.backgroundColor = "#ffffff"; loading.element.style.border = "1px solid #333333"; ...
首先：建立两个类，一个是用来与资料进行连接（数据层），另一个是用来关联前一个类与页面的（逻辑层） 新建一个JScsrip.js 文件 代码如下： 代码如下: function setPgb(pgbID, pgbValue,pvalues) { if ( pgbValue <= pvalues ) { if (lblObj = document.getElementById(pgbID+_label)) { lblObj.innerHTML =Math.ceil((pgbValue/pvalues)*100) + %; // change the label value } if ( pgbObj = document.getElementById(pgbID) )...
代码如下:/******************** ** js 蒙版进度条（图片） ** dingzh@jstrd.com ** 2009-12-03 *********************/ //禁止网页后退 window.history.forward(1); document.attachEvent("onkeydown",docKeyDown); function docKeyDown() { //屏蔽退格删除键 if (window.event.keyCode == 8) { if(window.event.srcElement.type != "text" && window.event.srcElement.type != "textarea" && window.event.srcElement.type != "p...
其实我本来的计划是做网页设计师的，可是没有人认为我设计的好，哥到现在还没有工作，发泄一下，不多说了。 效果图需要用到的图片： 背景图片：进度显示图片：网页结构： 代码如下: css代码： 代码 代码如下: #center{ margin:50px auto; width:400px; } #loading{ width:397px; height:49px; background:url(bak.png) no-repeat; } #loading div{ width:0px; height:48px; background:url(pro.png) no-repeat; color:#fff; ...
1.先上图，效果如下：2.使用方法 代码如下: var loader=new Ajaxloader(this._ContentID,{Text:loading......,Top:50}); loader.Show(); 3.代码列出： 代码如下: /* 处理进度条，异步加载器 */ var Ajaxloader=new Class(); Ajaxloader.prototype= { Text:数据加载中......, Parent:null, Left:0, Top:30, Initialize:function(parentid,o) { //alert(Init); Extend(this,o); if(parentid) { this.Parent=$(parentid); } return ...
New Document 加载中，请耐心等待'); window.onload = function () { document.getElementById('loadbox').style.display="none"; document.getElementById('imglist').style.display="block"; } // 欧文加油！ [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能，分享给大家供大家参考，具体内容如下 1. lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) {var Days = 30;var exp = new Date();exp.setTime(exp.getTime() + Days*24*60*60*1000);document.cookie = name + '='+ escape (value) + ';expires=' + exp.toGMTString(); } function getCookie(name) {var arr,reg=new RegExp('(^| )'+na...
本文实例讲述了jQuery简单实现提交数据出现loading进度条的方法。分享给大家供大家参考，具体如下： html部分代码如下，复制然后引入类库即可使用#bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.2; opacity:.2; filter: alpha(opacity=70);}.loading{display: none; position: absolute; top: 50%; left: 50%; z-index:1002; }j...
本人对后台不是太了解，所以这里做成了用户自己输入参数的办法来模拟从后台读参数的过程。 代码如下: *{margin:0; padding:0;} .uInfo{width:200px; padding:10px;} h3{margin:10px 0;} #level{width:150px; height:6px; border:1px solid #ccc; cursor:pointer;} #le{height:6px; width:0;display:block; background:#f00; font-size:0;} label{margin-left:10px;} #showTime{display:none; color:#f00; line-height:24px; ...
这样虽没有对功能有什么影响，可是体验总不怎么好，那如何解决这个问题了，网上有很多文章都有说过在被目标页加载后设置window.status = "xx"这类的，可是我发现这个方法这样的情形下并不怎么好使。 代码如下: 然后在1.html页面中加入 代码如下: window.onload = function(){ window.status = "完成"; } 结果发现1.html页面加载完成后浏览器下面进度条还一直在那里。 通过长时间反复的实践最后终于找到了解决问题的一种...
个人使用总结： 代码如下: 【Progresbar插件很重要】 $(document).ready(function () { $("#progress1").progressBar(68, { barImage: '/content/images/progressbg_red.gif' }); }); JQuery Progress Bar是基于JQuery开发的进度条插件，秉承了JQuery的简约哲学。 不仅容易使用，而且可以轻松定制外观。对于使用了JQuery框架的项目来说， 需要使用进度条控件时这是一个不错的选择。 JQuery Progress Bar与常规插...
第一种方法:Loading.js 代码如下: //频率 var frequency = 50; //步长 var step = 3; //背景颜色 var loadingBgcolor = "#ffffff"; //宽度 var loadingWidth = 354; /* *参数说明: *content：显示内容，可以为空； *imageURL：将引用JS文件的路径设置即可； *left：进度条显示位置left *top：进度条显示位置top */ function Loading(content, imageURL, left, top) { imageURL = imageURL + "Loading.jpg"; LoadTable(content, im...
效果图如下：http://jialiren.sinaapp.com/jdt/ Html代码如下： 代码如下: 进度条列 序号进度条进度备注其他 1 20 20 进度太慢了工作一 2 30 30 加油任务二 3 80 80 加油！！任务三 4 80 80 加油！！任务三 我的目的是把第二列的数值替换成条状图，asp.net girdview 控件生成的也是table标签，因此后面的脚本对gridview的数据呈现也起作用。 我的思路很简单，枚举table中的行，找到第二列，取值，替换成对应长度的...