作者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)