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

来源：互联网发布：linux安装教程编辑：程序博客网时间：2024/04/28 18:16
<!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>
0 0