管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

js排序动画模拟-插入排序

<!DOCTYPE html"> 
<html>

<style></style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%3C!--%20%0D%0A%0D%0Awindow.onload%20%3D%20function()%7B%20%0D%0Avar%20mop%20%3D%20document.getElementById(%22mop%22)%2Cfrag%20%3D%20document.createDocumentFragment()%3B%20%0D%0A(function()%7B%20%0D%0Avar%20li%20%2C%20a%3B%20%0D%0Afor(var%20i%20%3D%200%3B%20i%20%3C%2025%3B%20i%2B%2B)%7B%20%0D%0Ali%20%3D%20document.createElement(%22li%22)%3B%2F%2FYI.newLi(%7BclassName%3A%22fac%22%2Cid%3A%22f%22%20%2B%20i%7D)%5B0%5D%3B%20%0D%0Ali.className%20%3D%20%22fac%22%3B%20%0D%0Ali.id%20%3D%20%22f%22%20%2B%20i%3B%20%0D%0Aa%20%3D%20document.createElement(%22a%22)%3B%20%0D%0Ali.appendChild(a)%3B%20%0D%0Afrag.appendChild(%20li%20)%3B%20%0D%0A%7D%20%0D%0Amop.appendChild(frag)%3B%20%0D%0A%7D)()%3B%20%0D%0A%0D%0Avar%20facs%20%3D%20document.getElementsByTagName(%22li%22)%2C%20set%20%3D%20%5B%5D%2C%20steps%20%3D%20%5B%5D%3B%20%0D%0AjOne.each(facs%2Cfunction(i)%7B%20%0D%0Avar%20hsb%3D%22rgb(%22%20%2Brand(0%2C%20200)%2B%22%2C%22%2B%20rand(50%2C%20250)%20%2B%20%22%2C%20%22%20%2B%20rand(50%2C%20200)%20%2B%20%22)%22%2C%2F%2F%20%0D%0Ah%20%3D%20rand(100%2C%20500)%3B%20%0D%0Aset.push(h)%3B%20%0D%0AjOne.setStyle(this%2C%20%7Bheight%3Ah%20%2B%20%22px%22%2Cleft%3Ai%20*%2025%2B300%7D)%3B%20%0D%0AjOne.setStyle(this.children%5B0%5D%2C%20%7Bbackground%3Ahsb%2Cwidth%3A%2225px%22%2Cheight%3Ah%20%2B%20%22px%22%7D)%3B%20%0D%0A%7D)%3B%20%0D%0A%0D%0Avar%20queue%20%3D%20%5B%5D%3B%20%0D%0Avar%20bub%20%3D%20bubble()%3B%20%0D%0Abub.sort(set%2Cqueue)%3B%20%0D%0Avar%20dq%20%3D%20createDq()%3B%20%0D%0Adq.setDq(queue)%3B%20%0D%0Adq.run(function()%7B%20%0D%0Avar%20reg%20%3D%20%2F(%5C%3A)%7C(%5C%5E)%7C(%5C-)%2F%2Carg%20%3D%20arguments%5B0%5D%2Cids%2C%20elem1%2C%20elem2%2C%20%0D%0Aret%20%3D%20arg.match(reg)%3B%20%0D%0Aif(ret%5B1%5D)%7B%20%0D%0Aids%20%3D%20arg.split(%2F%5C%3A%2F)%3B%20%0D%0Aelem2%20%3D%20document.getElementById(%22f%22%20%2B%20ids%5B1%5D)%3B%20%0D%0Adq.setCl(%20elem2.children%5B0%5D%20)%3B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0Aif(ret%5B2%5D)%7B%20%0D%0Aids%20%3D%20arg.split(%2F%5C%5E%2F)%3B%20%0D%0Aelem1%20%3D%20document.getElementById(%22f%22%20%2B%20ids%5B0%5D%20)%3B%20%0D%0Aif(ids%5B0%5D%20%3D%3D%20ids%5B1%5D)%20return%3B%20%0D%0Avar%20cl%20%3D%20dq.getCl()%3B%20%0D%0Aif(elem1.children.length%20)%7B%20%0D%0Aelem1.removeChild(elem1.children%5B0%5D)%3B%20%0D%0Aelem1.appendChild(cl)%3B%20%0D%0A%7Delse%7B%20%0D%0Aelem1.appendChild(cl)%3B%20%0D%0A%7D%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0Aif(ret%5B3%5D)%7B%20%0D%0Aids%20%3D%20arguments%5B0%5D.split(%2F%5C-%2F)%3B%20%0D%0Aelem1%20%3D%20document.getElementById(%22f%22%20%2B%20ids%5B0%5D%20)%3B%20%0D%0Aelem2%20%3D%20document.getElementById(%22f%22%20%2B%20ids%5B1%5D%20)%3B%20%0D%0Aif(ids%5B0%5D%20%3D%3D%20ids%5B1%5D)%20return%3B%20%0D%0Aif(elem1.children.length)%7B%20%0D%0Aelem1.removeChild(elem1.children%5B0%5D)%3B%20%0D%0Aelem1.appendChild(elem2.children%5B0%5D)%3B%20%0D%0A%7Delse%7B%20%0D%0Aelem1.appendChild(elem2.children%5B0%5D)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D)%3B%20%0D%0A%7D%3B%20%0D%0A%0D%0Afunction%20createDq()%7B%20%0D%0Avar%20dq%20%3D%20%5B%5D%2C%20size%20%3D%200%2C%20cl%3B%20%0D%0Areturn%20%7B%20%0D%0AsetDq%3Afunction(queue)%7B%20%0D%0Adq%20%3D%20queue%3B%20%0D%0Asize%20%3D%20queue.length%3B%20%0D%0A%7D%2C%20%0D%0Aqueue%3Afunction(fn)%7B%20%0D%0Asize%20%2B%2B%3B%20%0D%0Adq.push(fn)%3B%20%0D%0A%7D%2C%20%0D%0Adqueue%3Afunction()%7B%20%0D%0Asize%20--%3B%20%0D%0Areturn%20dq.shift()%3B%20%0D%0A%7D%2C%20%0D%0Arun%3Afunction(fn)%7B%20%0D%0Avar%20me%20%3D%20this%2C%20timer%3B%20%0D%0A%0D%0Atimer%20%3D%20setInterval(function()%7B%20%0D%0Aif(size%20%3C%3D%201)%7B%20%0D%0AclearInterval(timer)%3B%20%0D%0A%7D%20%0D%0Afn.call(null%2Cme.dqueue())%3B%20%0D%0A%7D%2C100)%3B%20%0D%0A%7D%2C%20%0D%0AsetCl%3Afunction(elem)%7B%20%0D%0Acl%20%3D%20elem%3B%20%0D%0A%7D%2C%20%0D%0AgetCl%3Afunction()%7B%20%0D%0Areturn%20cl%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20bubble()%7B%20%0D%0Avar%20obs%20%3D%20%5B%5D%3B%20%0D%0Areturn%20%7B%20%0D%0AaddOb%3Afunction(ob)%7B%20%0D%0Aobs.push(ob)%3B%20%0D%0A%7D%2C%20%0D%0Asort%3Afunction(arr%2Cq)%7B%20%0D%0Avar%20len%20%3D%20arr.length%2C%20i%20%3D%201%2C%20j%2C%20t%2C%20cl%3B%20%0D%0Afor(%3B%20i%20%3C%20len%3B%20i%2B%2B)%7B%20%0D%0At%20%3D%20arr%5Bi%5D%3B%20%0D%0Aq.push(%22clone%3A%22%20%2B%20i)%3B%20%0D%0Aj%20%3D%20i%20%3B%20%0D%0Awhile(j%20%3E0%20%26%26%20(t%20%3C%20(arr%5Bj%20-%201%5D)))%7B%20%0D%0Aq.push(j%20%2B%20%22-%22%20%2B%20(j%20-%201))%3B%20%0D%0Aarr%5Bj%5D%20%3D%20arr%5Bj-1%5D%3B%20%0D%0Aj--%3B%20%0D%0A%7D%20%0D%0Aq.push(j%20%2B%20%22%5E%22%20%2B%20i)%3B%20%0D%0Aarr%5Bj%5D%20%3D%20t%3B%20%0D%0A%7D%20%0D%0A%7D%2F%2Fsort%20%0D%0A%7D%2F%2Freturn%20%0D%0A%7D%20%0D%0Avar%20jOne%20%3D%20%7B%20%0D%0Aeach%3Afunction(obj%2Ccallback)%7B%20%0D%0Avar%20i%20%3D%200%2Clen%20%3D%20obj.length%3B%20%0D%0Afor(var%20value%20%3D%20obj%5B0%5D%3B%20%0D%0Ai%20%3C%20len%20%26%26%20callback.call(value%2Ci%2Cvalue)%20!%3D%3Dfalse%20%3B%20%0D%0Avalue%20%3D%20obj%5B%20%2B%2Bi%20%5D%20)%7B%7D%3B%20%0D%0A%7D%2C%20%0D%0AsetStyle%3Afunction(elem%2C%20opt)%7B%20%0D%0Avar%20o%2C%20sty%20%3D%20elem.style%3B%20%0D%0Afor(var%20o%20in%20opt)%7B%20%0D%0Asty%5Bo%5D%20%3D%20opt%5Bo%5D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20rand(a%2C%20b)%7B%20%0D%0Avar%20ret%20%3D%20Math.random()%20*%20(b%20-%20a)%20%2B%20a%3B%20%0D%0Areturn%20ret%20%3E%3E%200%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F--%3E%3C%2Fscript%3E"> 
<ul id="mop"></ul> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程