html5自动排序,HTML5 简单的可视化排序

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var cont = document.getElementById('cont');

var nextColor = 'green';

var prevColor = 'black';

var el = document.createElement('div');

var df = document.createDocumentFragment();

for (var i = 0; i < 500; i++) {

var height = 50 + Math.random() * 350 | 0;

var tmp = el.cloneNode();

tmp.style.height = height + 'px';

tmp.style.left = i + 'px';

df.appendChild(tmp);

}

cont.appendChild(df);

function fadeBack(el) {

setTimeout(function () {

el.style.backgroundColor = prevColor;

}, 100);

}

(function step() {

requestAnimationFrame(step);

for (var i = 0; i < cont.children.length - 1; i++) {

var el1 = cont.children[i];

var el2 = cont.children[i + 1];

if (parseInt(el1.style.height, 10) > parseInt(el2.style.height, 10)) {

var tmpx = el1.style.left;

el1.style.left = el2.style.left;

el2.style.left = tmpx;

el1.style.backgroundColor = nextColor;

cont.insertBefore(el2, el1);

fadeBack(el1);

}

}

}());