首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jquery演练汉诺塔移动过程

2012-08-29 
jquery演示汉诺塔移动过程前几天用递归写汉诺塔程序,写了半天没写出来(呵呵,比较笨啊),后来在网上搜了下代

jquery演示汉诺塔移动过程
    前几天用递归写汉诺塔程序,写了半天没写出来(呵呵,比较笨啊),后来在网上搜了下代码才恍然大悟。
    今天下午上班闲着没事就写了个演示汉诺塔的移动过程的js,开始写的很顺利,就是在写完后,发现前一个圆盘没移动完,后一个圆盘就开始移动了。后来下班的时候在路上有了思路,用个标识符记录是第几步,然后用setTimeout进行等待(这个应该和线程差不多,工作以来一直没写过关于线程的程序,以前学的东西都忘了,所以想的时候费了点力气)。
    代码比较粗糙,也没整理,有很多变量都是写死的,大家凑合看把。第一次发帖,大家轻喷,呵呵。   
    先输入圆盘的数量,点击确定,然后再点击move就可以了。

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);}

<!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 name="code">@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}

热点排行