作者tomin (Schrödinger's cat)
看板Ajax
标题Re: [问题] 请问有办法这样做吗
时间Fri Jun 18 13:40:00 2010
: : → evernever:设 setTimeout 试试,每0.n秒小额减少, 看起来就像动画了 06/18
: 你说像这样吗
: change_num(20);
: function change_num(num)
: {
: //目前数字
: var now_num = parseInt($('#num').text());
: if( num > now_num )
: { //如果新数字大於目前数字
: $('#num').text(now_num+1);
: setTimeout("change_num("+num+")",100);
: }
: if( num < now_num )
: { //如果新数字小 於目前数字
: $('#num').text(now_num-1);
: setTimeout("change_num("+num+")",100);
: }
: }
: 不知道还可不可以再精简一点
我没想到用递回 我的写法如下 虽然行数没比较少 但应该还不错用
<input type="button" value="change 1995" rel="1995">
<input type="button" value="change 180" rel="180">
<input type="button" value="change 99" rel="99">
<input type="button" value="change 50" rel="50">
<div id="num">110</div>
<script type="text/javascript" src="
http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript">
function text(val){
$('#num').text(val);
}
$("input").click(function(){
var begin=parseInt($("#num").text());
var end=parseInt($(this).attr("rel"));
var ranges=end-begin;
var steps=6;
var time=500;
var timeframe=time/steps;
var range=ranges/steps;
for(var i=1;i<steps;i++){
var val=Math.round(begin+range*i);
setTimeout("text("+val+")", timeframe*i);
}
setTimeout("text("+end+")", time);
});
</script>
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 140.122.30.140
※ 编辑: tomin 来自: 140.122.30.140 (06/18 13:43)