从数值0%开始在指定DIV里快速的显示到100%,我想做那种进度条的过度效果,不知道如何用JS或jQuery实现?

从数值0%开始在指定DIV或者TD里非常快速的显示到100%,有点像缓冲效果,我想做那种进度条的过度,不知道如何用JS或jQuery实现?
rogertl 理解错了吧?或者是我没说清楚?

我的意思是在一个TD或者DIV里面,显示从0到100的快速显示!这里面的0-100是可见的数字!与css百分数属性等无关!

看过比赛用的计时器了吧?比赛开始时,按钮按下去后秒以下单位会从0开始,非常快速变化,我要的就是那效果
----------------------------------------------------------------------
yanzilisan183 谢谢你
可能我不应该提什么该死的“进度条”误导了大家,我是想实现在页面显示从0-100的快速显示(注意:这个“快速显示”的过程是可以看见数字由小到大在变化),比如我的某个进度达到了80%,那么我要在某个位置快速的从0%非常快速的显示到80%,要的是那种数字累加快速变化的显示效果!

已按你的要求修改,现在不是进度条,而是跑表!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
<body>
<span id="s1"></span>%
<script language="javascript">
var i = 0;
function doit(){
i = i + 1;
var o = document.getElementById('s1');
o.innerHTML = i.toString();
if(i<100) setTimeout('doit()',10);
}
doit();
</script>
</body>追问

谢谢你 和我想要的还是有些出入的,不过你这效果有点那个意思了

追答


%
%

function doit(oid,n){
var o = document.getElementById(oid);
var i = parseInt(o.innerHTML) + 1;
if(isNaN(i)) i = 0;
o.innerHTML = i.toString();
if(i

你不就是想要个传参的么? 简单, 改一下就行了.
再给你改一个可以传对象ID的.

追问

以下是我初步的代码,在页面有未知数量的百分数要读取,我已经去掉百分号了,请教怎么和你的“doit(oid,n){}”对接啊?
for(var i=1; i<document.getElementsByTagName('td').length; i++){
var aaa=document.getElementById("percentage"+i).innerHTML();//取得百分数
var lastIndex=aaa.lastIndexOf('%');
var pt=0, pe=aaa.substring(0, lastIndex);//截取百分号前的内容
var po=document.getElementById('amount'+i);}

追答

doit("percentage"+i, pe);
或是
doit("amount"+i, pe);
没搞清楚你哪个对象是要用来显示这个跑表的, "percentage"+i 还是 'amount'+i
反正就是这么个调用方法,把你要产生动态对象的ID做为第一个参数, 跑到多少停止做为第二个参数就行了. 第二个参数是可以大于100的.

温馨提示:答案为网友推荐,仅供参考
第1个回答  2011-10-17
yanzilisan183 递归方法很好。就是不能传参(我要0~88)呢。追问

是啊 我现在正在头疼怎么把参数传过去,我的百分数的数据变量有多少个是不确定的,可能会有许多个88%、67%、59%……等等这样的,不知道怎么能做到同时用这种效果显示……

追答

很简单呀!

%
%
%

function doit(end,id){
var o = document.getElementById(id);
var i = 0;
var Interval;
if(iend) {
clearInterval(Interval);
i = 0;}
},10);
}
else alert('参数有误');

}
doit(80,'s1');
doit(90,'s2');
doit(100,'s3');

第2个回答  2011-10-17
<div style="position: relative;width: 300px;border: 1px solid #69F; padding: 1px;margin-top: 10px;margin-bottom: 5px;">
<div style="width:50%";display: block;position: relative;background:"#6699FF";color: #333333;height: 15px;line-height: 15px;"><span style="position: absolute; width: 300px; text-align: center;font-weight: bold;50%?></span></div>

自己修改里面的50%为你需要的吧。
第3个回答  2011-10-18
function doit(id, start, end){
start = isNaN(parseInt(start)) ? 0 :parseInt(start);
end = isNaN(parseInt(end)) ? 0 :parseInt(end);
document.getElementById(id).innerHTML = start;
if (start++ != end){setTimeout(function(){doit(start, end)},100)}
}
doit('s1', 0, 10);
相似回答