闲来无事,写了个排序算法;我的思路是将一组数据进行两两比较,如果前面的数大于后面的数,那么将它们交换一下位置;如此重复循环;
代码如下:
public String test(){
ArrayList<Integer> list= new ArrayList<Integer>();
for(int k =0;k<11;k++){
int a=(int)(Math.random()*100);
list.add(a);
}
System.out.println(list);
for(int j =0;j<list.size()-1;j++){
for(int i =0;i<list.size()-1;i++){
list.get(i);
if(list.get(i)>list.get(i+1)){
Integer order=list.get(i);
list.set(i,list.get(i+1));
list.set(i+1, order);
}
}
}
return "show";
}
但是这样还是感觉无聊,所以我想将数据显示出来,形成排序动画效果。
所以我将数据当做一个div高度的值,多少个数据就有多少个div;
后端:
@RequestMapping("qq.do")
public String aa(Map<String,Object> map){
ArrayList<Integer> list= new ArrayList<Integer>();
for(int k =0;k<200;k++){
int li=0;
list.add(li);
}
map.put("list",list);
return "test1";
}
前端用到thymeleaf:
<div style="height: 100px;width: 100%">
<div style="height: 100px;width: 100px;float: left"><button id="www">排序</button></div>
<div style="height: 100px;width: 100px;float: left"><button id="eee">生成随机数</button></div>
</div>
<div style="height: 600px;width: 100%;">
<div th:each="user:${list}" style="height: 100px;width: 5px;background-color: #ff5722;float: left ; border:1px solid black ;position:relative ;margin-top: 10px ;margin-bottom: 20px"><p style="font-size: 5px" ></div>
</div>
这样我们只需控制k的值就能获得不同数量的div
效果如下:
接下来就需要生成随机数;通过异步的方式生成,并将返回值设为div的高度
前端:
$("#eee").click(function() {
var a=$("div").length
$.ajax({
type:"get",
url:"test1.do",
cache:false,
dataType:"text",
data:{"a":a},
success:function (msg){
ll=0;
var pp=$.parseJSON(msg);
for(var p=0;p<=pp.length;p++){
$("div").eq(p+4).height(pp[p]);
}
}
})
});
后端:
@RequestMapping("test1.do")
@ResponseBody
public List<Integer> test1(Integer a){
ArrayList<Integer> list= new ArrayList<Integer>();
for(int k =0;k<a;k++){
int li=(int)(Math.random()*500+1);
list.add(li);
}
return list;
}
点击生成随机数的效果是这样的:
接下来,我们需要进行排序:
同样使用异步:
前端:
$("#www").click(function() {
var hli=[];
for(var z=0;z<$("div").length-4;z++){
var height=$("div").eq(z+4).height();
hli.push(height);
}
$.ajax({
type:"post",
url:"test2.do",
cache:false,
contentType : 'application/json;charset=utf-8', //设置请求头信息
dataType:"json",
data:JSON.stringify(hli),
success:function (msg){
for(var x=0;x<msg.length;x++){
$("div").eq(x+4).height(msg[x]);
}
$("#www").trigger("click");//让异步不停地自动触发跳转
}
})
});
后端:
@RequestMapping("test2.do")
@ResponseBody
public List<Integer> test2(@RequestBody List<Integer> hli, HttpSession session){
if(time==0){
startTime = System.currentTimeMillis();
}
time=1;
List<Integer> hli1=new ArrayList<>();
for (int i=0; i<hli.size();i++){
hli1.add(hli.get(i));
}
for(int j =0;j<hli.size()-1;j++){
if(hli.get(j)>hli.get(j+1)){
Integer order=hli.get(j);
hli.set(j,hli.get(j+1));
hli.set(j+1, order);
}
}
if(hli.equals(hli1)){
System.out.println("耗时:" + (System.currentTimeMillis() - startTime) + "ms");
System.exit(0);
}
return hli;
}
最终运行代码就可以实现动画了;
排序显示