【发布时间】：2016-06-29 21:53:18
【问题描述】：
我正在尝试可视化 shellsort 算法。
function shellSort (a) {
for (var h = a.length; h = parseInt(h / 2);) {
for (var i = h; i < a.length; i++) {
var k = getInt(a[i].id);
var helper = a[i];
for (var j = i; j >= h && k < getInt(a[j - h].id); j -= h){
var idA = a[j].id;
var idB = a[j - h].id;
setTimeout(function(){
animatTthis($('#' + idA), 500);
animatTthis($('#' + idB), 500);
console.log('animate!');
},250);
a[j] = a[j - h];
}
a[j] = helper;
}
}
return a;
}
首先，我创建随机数并将它们作为 p-tag 添加到 div 中。之后，我将所有具有拟合类的 div 推送到一个数组中，该数组提供给上面的 shellsort 函数。 这工作正常，但我无法让动画正常工作。
function animatTthis(targetElement, speed) {
$(targetElement).animate({ top: "50px"},
{
duration: speed,
complete: function ()
{
setTimeout(function(){
$(targetElement).animate({ top: "0px" },{
duration: speed,
complete: function (){
console.log('animate!');
}
});
},500);
}
});
};
它只为循环中的最后两个 Div 设置动画。
我的意图是交换的两个 Div 再次向下滑动。 shellsort 应该在那之后继续。
我尝试了许多不同的解决方案，但我无法让它按照我想要的方式工作。
完成的版本应该在视觉上交换两个 div。所以如果你有一个快速的解决方案或链接给我，那就太棒了。
提前致谢。
编辑：
使用的 HTML 和 CSS：
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.0.0.js"></script>
<script src="script.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>
<link rel="stylesheet" href="stylesheet.css">
<title>Shell Sort</title>
</head>
<body>
<h1 >Shell- sort</h1>
<button id='randomNumbers'>Numbers!</button> // creeates random numbers
<button id='okay'>Okay!</button> //starts the shellsort
<div id='container'>
<div id="element1" class="test"><p class='value' id='e1ID'></p></div>
<div id="element2" class="test"><p class='value' id='e2ID'></p></div>
<div id="element3" class="test"><p class='value' id='e3ID'></p></div>
<div id="element4" class="test"><p class='value' id='e4ID'></p></div>
<div id="element5" class="test"><p class='value' id='e5ID'></p></div>
<div id="element6" class="test"><p class='value' id='e6ID'></p></div>
</div>
</body>
</html>
CSS：
h1{
color:red;
}
.value{
margin: 0;
text-align: center;
line-height:75px;
font-size: 30px;
font-weight: bold;
}
.test{
background-color: red;
height: 75px;
width: 75px;
position: relative;
float:left;
margin: 10px;
border-radius: 50%;
}
这里没有任何功能，但也许有帮助.. :)
jquery 代码：
$(document).ready(function(){
//#############---giveRandomNumbers----#############
$("#randomNumbers").click(function(){
var numbers = [];
for(var i = 0; i < 6; i++){
var $random = Math.floor((Math.random() * 100) + 1);
numbers.push($random);
}
for(var int = 0; int < numbers.length; int++){
$('#e'+(int + 1)+'ID').text(numbers[int]);
}
});
$('#okay').click(function(){
var $ids = $('.test');
shellSort($ids);
for(var int = 0; int < $ids.length; int++){
console.log(getInt($ids[int].id));
$("#container").append($ids[int]);
}
});
//#############---getIntegerOfDiv----#############
function getInt(id) {
var $number = parseInt($('#'+ id).find("p").text());
return $number;
};
//#############---animationCarry----#############
function createAnimation(a, b) {
return function() {
animatTthis($('#' + a), 500);
animatTthis($('#' + b), 500);
};
}
//#############---animation----#############
function animatTthis(targetElement, speed) {
$(targetElement).animate({ top: "50px"},
{
duration: speed,
complete: function (){
setTimeout(function(){
$(targetElement).animate({ top: "0px" },{
duration: speed,
complete: function (){
console.log('animate!');
}
});
},500);
}
});
};
//#############---shellSort----#############
function shellSort (a) {
for (var h = a.length; h = parseInt(h / 2);) {
for (var i = h; i < a.length; i++) {
var k = getInt(a[i].id);
var helper = a[i];
for (var j = i; j >= h && k < getInt(a[j - h].id); j -= h){
a[j] = a[j - h];
var idA = a[j].id;
var idB = a[j - h].id;
setTimeout(createAnimation(idA, idB), 250);
}
a[j] = helper;
}
}
return a;
}
});
【问题讨论】：
-
可以在这里添加相关的HTML和CSS吗？
-
感谢分享 HTML 和 CSS。我正在检查您的代码，但无法找到在创建随机按钮和函数
getInt上调用的代码。因此，请分享您的script.js文件中的代码。一旦我们可以在这里重现代码，就很容易修复代码。谢谢。 -
我在帖子中添加了 jquery 代码！感谢您的关注:)
-
我会尽快检查的。谢谢..！