jquery 动态演示各种排序实例代码

作者：袖梨 2022-06-25
提示：您可以先修改部分代码再运行




快速排序（quicksort）的javascript实现-动画演示

css.css" type="text/css" rel="stylesheet" />

.graphical-sort{
position: relative;
width: 100%;
height: 100%;
padding-top: 40px;

}

.graphical-sort .bars-container{
height: 100%;
background: #222;
white-space: nowrap;
overflow: hidden;
}

.graphical-sort .bars-container span{
display: inline-block;
position: relative;
height: 100%;
background: #35bddb;
border-left: 1px solid #222;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.graphical-sort .bars-container span.highlight{
background: #aee496;
}

.graphical-sort .controller{
position: absolute;
font-size: 10px;
white-space: nowrap;
overflow: visible;
top: 0px;

}
.graphical-sort .controller .widget{
margin-right: 5px;
}

.graphical-sort .controller .speed-amount{
display: inline-block;

}

.graphical-sort .controller .speed-slider{
display: inline-block;

}







// -----------------------------------------
// utils
// -----------------------------------------
jquery.fn.swap = function(b){
b = jquery(b)[0];
var a = this[0];
var temp = a.parentnode.insertbefore(document.createtextnode(''), a);
b.parentnode.insertbefore(a, b);
temp.parentnode.insertbefore(b, temp);
temp.parentnode.removechild(temp);
return this;
}

array.prototype.insert = function(value, index){
var array = this
for(var i = array.length - 1; index array[i + 1] = array[i]
}
array[index] = value
}

array.prototype.insertbefore = function(from, to){
this.insert(this[from], to)
if(to from += 1
}
this.splice(from, 1)
}
array.prototype.swap = function(a, b){
var temp = this[a]
this[a] = this[b]
this[b] = temp
}

function range(min, max){
var array = []
while(min array.push(min)
min++
}
return array
}

function randrange(min, max){
return math.floor(math.random() * (max - min)) + min
}

function shuffle(array){
var length = array.length
for(var i = 0; i var j = randrange(0, length)
var temp = array[i]
array[i] = array[j]
array[j] = temp
}
return array
}

window.profile = {
nowprofiling: false,
start: function(name){
if(profile === false) return
if(this.nowprofiling){
console.profileend()
}
this.nowprofiling = true
console.profile(name)
},
end: function(){
if(profile === false) return
this.nowprofiling = false
console.profileend()
}
}

// -----------------------------------------
// queue class
// -----------------------------------------
var queue = class.$extend({
__init__: function(){
this.length = 0
this.i = 0
this.queue = []
},

get: function(){
if(this.length === 0)
return undefined
this.length--
return this.queue[this.i++]
},

put: function(value){
this.queue.push(value)
this.length++
}
})

// -----------------------------------------
// controller class
// -----------------------------------------
controller = class.$extend({
widget: $(""),
reset: $.noop,
onspeedchange: $.noop,
onlengthchange: $.noop,

__init__: function(defaults){
this.element = $("

")
var restart = this._createrestartbutton()
var buttonset = this._createlengthbuttonset(defaults.length)
var slider = this._createspeedslider(defaults.speed)
this.element.append(restart).append(buttonset).append(slider)
},


_createrestartbutton: function(){
var self = this
var button = $("重新演示").button().click(function(){
self.restart()
})
return this.widget.clone().append(button)
},

_createspeedslider: function(defaultspeed){
var self = this
var amount = $("").text(defaultspeed)
var slider = $("")
slider.slider({
min: 1,
max: 300,
value: defaultspeed,
slide: function(event, ui){
amount.text(ui.value)
self.onspeedchange(ui.value)
}
})

var sliderwrapper = $("").append(amount).append(slider)
return this.widget.clone().text("演示速度: ").append(sliderwrapper)
},

_createlengthbuttonset: function(defaultlength){
var self = this
var buttonset = this.widget.clone().addclass("length-button")
var radioname = "graphical-sort-radio"
var _label = $("")
var _radio = $("").attr("name", radioname)
$.each([5, 10, 30, 50, 100, 200], function(i, length){
var label = _label.clone().text(length + "个排序").attr("for", radioname + length)
var radio = _radio.clone().attr("id", radioname + length).val(length)
buttonset.append(label).append(radio)
})
buttonset.find("input[value=" + defaultlength + "]").attr("checked", "checked")
buttonset.buttonset()
buttonset.click(function(event, ui){
self.onlengthchange(parseint(event.target.value))
})
return buttonset
}
})
// -----------------------------------------
// bar class
// -----------------------------------------
var bar = class.$extend({
__init__: function(value){
this.value = value
},
createelement: function(){
var bar = $("")
return bar
}
})

// -----------------------------------------
// bars class
// -----------------------------------------
var bars = class.$extend({
__init__: function(length, container){
this.length = length
this.container = container
this.bars = []
var values = this.values = shuffle(range(1, length+1))

for(var i = 0; i this.bars[i] = bar(values[i])
}
this.elements = this._createelements()
},

swap: function(a, b, command){
var classname = "highlight"
var elements = this.container.find("span")
elements.removeclass(classname)
var bara = elements.eq(a)
var barb = elements.eq(b)
bara[0].classname = barb[0].classname = classname
if(command === c.swap){
barb.swap(bara)
}
},

insert: function(from, to){
var elements = this.container.find("span").removeclass("highlight")
this.container[0].insertbefore(elements.eq(from).addclass("highlight")[0], elements[to])
},

_createelements: function(){
var elements = $()
var length = this.length
$.each(this.bars, function(){
var bar = this
var element = bar.createelement()
element.css("width", 100 / length + "%")
element.css("height", bar.value / length * 100 + "%")
elements = elements.add(element)
})
return elements
}
})

var command = class.$extend({
__classvars__: {
highlight: "highlight",
swap: "swap",
insert: "insert",
set: "set"
}
})
var c = command

// -----------------------------------------
// graphicalsort class
// -----------------------------------------
graphicalsort = class.$extend({
length: 30, // default list length
speed: 100, // default speed
currenttaskid: -1,

__init__: function(){},

// graphical api
compare: function(a, b){
var command = c.highlight
if(this.values[a] > this.values[b]){
this.values.swap(a, b)
command = c.swap
}
this.task.put([a, b, command])
},

// graphical api
highlight: function(a, b){
this.task.put([a, b, c.highlight])
},

// graphical api
swap: function(a, b){
this.values.swap( a, b)
this.task.put([a, b, c.swap])
},

// graphical api
insertbefore: function(from, to){
this.values.insertbefore(from, to)
this.task.put([from, to, c.insert])
},

show: function(viewelement){
if(this.sortfunc === undefined){
throw error("sort function is undefined")
}
this.$sort = $("

")
this.$sort.append(this._createcontroller().element)
this.container = $("
")
this.$sort.append(this.container)

viewelement.append(this.$sort)
this.displaybars()
},

displaybars: function(){
cleartimeout(this.currenttaskid)
this.bars = bars(this.length, this.container)
this.values = this.bars.values
this.container.empty().append(this.bars.elements)
this._inittask()

profile.start()
this._settimeout()
},

complete: function(){
this.container.find("span").removeclass("highlight")
if(this.sortfunc.name === "bogosort"){
if(this.bogosortcompleted === false){
this._inittask()
this._settimeout()
return
}
}
profile.end()
},

_createcontroller: function(){
this.controller = controller({
speed: this.speed,
length: this.length
})
return this._seteventtocontroller(this.controller)
},

_seteventtocontroller: function(controller){
var self = this
controller.onlengthchange = function(length){
self.length = length
self.displaybars()
}
controller.onspeedchange = function(speed){
self.speed = speed
}
controller.restart = function(){
self.displaybars()
}
return controller
},

_inittask: function(){
this.task = queue()
this.sortfunc()
},

_next: function(){
var order = this.task.get()
if(order === undefined){
this.complete()
return
}
var command = order[2]
if(command === c.insert){
this.bars.insert(order[0], order[1])
}else{
this.bars.swap(order[0], order[1], command)
}

this._settimeout()

},

_settimeout: function(){
var self = this
var interval = 2000 / this.speed
this.currenttaskid = settimeout(function(){
self._next()
}, interval)
}
})

})()



提示：您可以先修改部分代码再运行

相关文章

精彩推荐