关于与同学合作的 排序算法显示小应用 的个人总结

关于与同学合作的 排序算法显示小应用 的个人总结

前段时间与同学合作完成了一个关于排序算法显示的小应用，在此做一个关于这个小项目的总结。

此应用利用了HTML、JavaScript、CSS等语言，由包括我在内四个人合作完成。其中一个同学为组长，负责整体连接与调控；一个同学负责布局编辑设计；一个同学负责排序算法实现；本人负责实现交换功能的显示实现。

关于交换显示，在具体实现前前有两个方案：方案一是交换两个数字条的位置；方案二是交换两个数字条的属性。关于位置的变化，实现起来有一些困难，因此决定采用方案二，即交换数字条的属性，数字条的属性具体表现为两个数字条的颜色与高度。我是利用JS语言、JQuery框架实现的。首先获取数字条对象，然后执行交换函数，交换函数内部的颜色与高度，具体代码如下：

/*
*   功能：交换两个节点函数
*   参数：两个节点元素,颜色color
*/
function SwapNode(div1,div2){
var h1=$(div1).height();
var h2=$(div2).height();
$(div1).height(h2);
$(div2).height(h1);

var boxHeight=$("#content").height();
$(div1).css("marginTop",boxHeight-$(div1).height());
$(div2).css("marginTop",boxHeight-$(div2).height());

$(div1).children("div")[0].innerHTML=$(div1).height();
$(div2).children("div")[0].innerHTML=$(div2).height();
}

/*
*   功能：改变元素背景色
*   参数：节点node，颜色color
*/
function ChangeBg(node,color){
$(node).css("background-color",color);
}

注：关于颜色交换：

$(node).css("background-color",color);

个人实验显示完成效果截图：



整体显示效果截图：