JSFiddle - React, Tailwind, and code Playground

by bingbing

HTML

<div class="main">
		<div class="content">
			<div class="dipan pan1">A</div>
			<div class="dipan pan2">B</div>
			<div class="dipan pan3">C</div>
			<div class="zhu zhu1"></div>
			<div class="zhu zhu2"></div>
			<div class="zhu zhu3"></div>
			<div id="block" class="block">
				
			</div>
		</div>
		<div class="handle">
			<div class="num">
				<input id="numrange" type="range" value="4" max="10" min="1" step="1">
				<span id="numspan">4</span>
				<input id="start" type="button" value="开始">
			</div>
			<div id="tips"></div>
		</div>
	</div>

CSS

*{margin: 0; padding: 0;}
.main{position: absolute;width: 800px;height: 400px;border: 1px solid #CCC;top: 50%;left: 50%;margin: -240px 0 0 -400px;}
.content{position: absolute; height:300px; width: 100%; background-color: rgb(225, 248, 252); text-align: center;}
.handle{position: absolute; height: 100px; width: 100%; top:300px; text-align: center;}
.dipan{position: absolute; background: #000; color: #fff; width: 200px; height: 20px; top:280px; font-weight: bold;}
.pan1{left: 50px}
.pan2{left: 300px;}
.pan3{left: 550px;}
.zhu{position: absolute; background: #000; color: #fff; width: 4px; height: 150px; bottom: 20px;}
.zhu1{left: 148px;}
.zhu2{left: 398px;}
.zhu3{left: 648px;}
.block{position: absolute; height: 300px;}
.block .plate{position: absolute; height: 14px; border: 1px solid #000; background: rgb(172,172,235);}

JavaScript

// http://watercold.sinaapp.com/2012/06/hanoi/
var Hnt = (function(){
	var Hnt      = {};

	Hnt.options = {
		"speed":4.2,
		"chgColor":true,
		"color":"red",
		"n":4
	};

	Hnt.movie    = [];	// 移动动画存储数组

	Hnt.A        = [];	// 三个底盘
	Hnt.B        = [];
	Hnt.C        = [];

	Hnt.A.name   = "A";	// 底盘的名称
	Hnt.B.name   = "B";
	Hnt.C.name   = "C";

	Hnt.A.val    = "1";	// 底盘的序号
	Hnt.B.val    = "2";
	Hnt.C.val    = "3";

	Hnt.A.num    = 0;	// 底盘当前的盘子数
	Hnt.B.num    = 0;
	Hnt.C.num    = 0;

	// 初始化
	Hnt.init = function(opt){
		$("#block").html('');

		Hnt.movie = [];

		Hnt.options = $.extend(Hnt.options, opt);
		Hnt.A.num    = Hnt.options.n;
		Hnt.B.num    = 0;
		Hnt.C.num    = 0;

		Hnt.initBlock(Hnt.options.n);
		Hnt.move(Hnt.options.n, "A", "B", "C");
		$("#numrange").attr("disabled", "true");
		$("#start").attr("disabled", "true");
		Hnt.start();
	}

	// 汉诺塔算法
	Hnt.move = function(n, a, b, c){
		if(n==1){
			Hnt.handle(n, a, c);
		}else{
			Hnt.move(n-1, a, c, b);
			Hnt.handle(n, a, c);
			Hnt.move(n-1, b, a, c);
		}
	}

	/**
	 * 移动动画存储
	 * @param	m 		当前移动的盘子的编号
	 * @param 	_from   从哪个底盘开始移动
	 * @param 	_to 	移动到哪个底盘上
	 */
	Hnt.handle = function(m, _from, _to){
		var _fromBottom = Hnt.getAccessBottom(_from);
		var _toBottom   = Hnt.getAccessBottom(_to);

		var width = Hnt.getAccessWidth(_from, _to);
		var accessWidth = _from<_to?"+="+width:"-="+width;

		// $("#plate"+m).animate({"left":accessWidth}, width*Hnt.options.speed);
		

		Hnt.movie.push({"sno":m, "bottom":"170px", "left":"", "t":(170-_fromBottom)*Hnt.options.speed});
		Hnt[_from].num--;
		Hnt.movie.push({"sno":m, "bottom":"", "left":accessWidth, "t":width*Hnt.options.speed});
		Hnt.movie.push({"sno":m, "bottom":_toBottom, "left":"", "t":(170-_toBottom)*Hnt.options.speed});
		Hnt[_to].num++;
		
	}

	Hnt.start = function(order){
		order = order || 0;
		if(order < Hnt.movie.length){
			var t =...