本人编写的jquery演示汉诺塔移动过程

     前几天用递归写汉诺塔程序，写了半天没写出来（呵呵，比较笨啊），后来在网上搜了下代码才恍然大悟。 
    今天下午上班闲着没事就写了个演示汉诺塔的移动过程的js，开始写的很顺利，就是在写完后，发现前一个圆盘没移动完，后一个圆盘就开始移动了。后来下班的时候在路上有了思路，用个标识符记录是第几步，然后用setTimeout进行等待（这个应该和线程差不多，工作以来一直没写过关于线程的程序，以前学的东西都忘了，所以想的时候费了点力气）。 
    代码比较粗糙，也没整理，有很多变量都是写死的，大家凑合看把。第一次发帖，大家轻喷，呵呵。     
    先输入圆盘的数量，点击确定，然后再点击move就可以了。 index.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
<link href="css/page.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/page.js"></script>
  </head>
  
  <body>
<br/><br/>
   &nbsp;&nbsp;&nbsp;&nbsp;
请输入要移动盘的数量：<input type="text" name="amount" id="amount"/>
<input type="button" value="确定" id="ofcourse"/>
<input type="button" value="move" id="mover"/>
<div class="A"></div>
   <div class="B"></div>
   <div class="C"></div>
   <div class="bottom"></div>
  </body>
</html>
js/page.js@CHARSET "UTF-8";
*{
padding: 0;
margin: 0;
}
.A{
background-color: #000000;
width: 1px;
height: 300px;
position: absolute;
left: 200px;
top: 200px;
}
.B{
background-color: #000000;
width: 1px;
height: 300px;
position: absolute;
left: 350px;
top: 200px;
}
.C{
background-color: #000000;
width: 1px;
height: 300px;
position: absolute;
left: 500px;
top: 200px;

}
.pan{
position: absolute;
height: 10px;
overflow: hidden;
font-size: 9px;
text-align: center;
}
.bottom{
background-color: #000000;
width: 500px;
height:1px;
line-height:1px;
position: absolute;
left: 100px;
top: 500px;
overflow: hidden
}
js/jquery.js;
js/page.js
var R = ["00","11","22","33","44","55","66","77","88","99","AA","BB","CC","DD","EE","FF"];
var A = {ele:new Array(),top:500,left:200};
var B = {ele:new Array(),top:500,left:350};
var C = {ele:new Array(),top:500,left:500};
var amount;
var i=0;
$(function(){
$("#ofcourse").click(function(){
$(".pan").remove();
amount = $("#amount").val();
for(var i = amount; i > 0; i--){
var newDiv = $("<div id='"+i+"'>"+i+"</div>");
var color = "#" + getRandom() + getRandom() + getRandom();
var width = i*20+1;
var left = parseInt($(".A").css("left")) - (width-1)/2;
var top = parseInt($(".bottom").css("top")) - (amount-i+1)*13;
newDiv.addClass("pan");
newDiv.css({width:width+"px",left:left+"px",top:top+"px","background-color":color});
newDiv.appendTo("body");
A.ele.push(i);
}
A.top = parseInt($(".bottom").css("top")) - amount*13;
});
$("#mover").click(function(){
hnt(amount,A,B,C);
});
});function getRandom(){
return R[parseInt(Math.random()*16)];
}function hnt(n,a,b,c){
if(n==1){
setTimeout(function(){move(a,c)},i*3*500);
i++;
}
else{
hnt(n-1,a,c,b);
setTimeout(function(){move(a,c)},i*3*500);
i++;
hnt(n-1,b,a,c);
}
}function move(x,y){
var xtop = x.top;
var ytop = y.top;
var xele = x.ele;
var yele = y.ele;
var moveEle = xele[xele.length-1];
x.top = xtop + 13;
y.top = ytop - 13;
x.ele.pop();
y.ele.push(moveEle);
$("#"+moveEle).animate({top:"190"},500).animate({left:y.left-moveEle*10},500).animate({top:y.top+"px"},500);
}