您的位置：首页 > Web前端 > JavaScript

一个用JS实现的简单的汉诺塔

2014-04-07 16:02 489 查看

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>汉诺塔</title>
<style type="text/css">
*{margin:0;padding:0;}
#bd{position:fixed;top:50%;left:50%;width:800px;height:200px;margin:-100px 0 0 -400px;}
.pillar{position:relative;margin-left:200px;float:left;width:4px;height:200px;background:#000;}
.pillar:before{position:absolute;bottom:-20px;left:-2px;}
.pillar p{position:absolute;bottom:0;left:0;}
#A:before{content:'A';}
#B:before{content:'B';}
#C:before{content:'C';}
.disk{display:block;background:#f60;margin-top:1px;height:10px;}
</style>
</head>
<body>
<div id="bd">
<div class="pillar" id='A'>
<p></p>
</div>
<div class="pillar" id='B'>
<p></p>
</div>
<div class="pillar" id='C'>
<p></p>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var $=function(s){return document.getElementById(s)};
var $T='getElementsByTagName';
var A=$('A'),
B=$('B'),
C=$('C');
//创建圆盘
var createDisk=function(pillar,n){
var box=pillar[$T]('p')[0];
var _html='';
var disk=function(i){
var s=i*20;
return '<span class="disk" style="width:'+ s +'px;margin-left:'+ -(s/2-2) +'px;"></span>';
};
for(var i=1;i<=n;i++){
_html+=disk(i);
}
box.innerHTML=_html;
};
//移动圆盘
var move=function(cur,to){
var target=to[$T]('p')[0];
var disk=cur[$T]('span')[0];
target.insertBefore(disk,target.firstChild);//将圆盘移动到顶部
};
//汉诺塔算法
var hanoi=function(n,A,B,C){
var arry=[];
var _hanoi=function(n,A,B,C){
if(n==1){
arry.push(A,C);
}
else{
_hanoi(n-1,A,C,B);
arry.push(A,C);
_hanoi(n-1,B,A,C);
}
};
_hanoi(n,A,B,C);
return arry;
};
//延时
var delay=function(callback,time){
return setInterval(callback,time);
};
var hanoiStart=function(n,time){
createDisk(A,n);
var arry=hanoi(n,A,B,C);
var i=0,len=arry.length;
var T=delay(function(){
move(arry[i],arry[i+1]);
i=i+2;
if(i>=len){
clearInterval(T);
alert('完成!');
}
},time);
};
//开始汉诺塔(圆盘个数,延时--ms)
hanoiStart(5,200);
};
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航