//以下代码是自己用冒泡算法结合dom操作实现的排序操作。 熟悉js功能的朋友可以直接用sort()内置函数实现数组的排序,此方法是自己写的冒泡排序,有助于理解算法的思想.
代码可直接复制使用,已经优化精简//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冒泡排序</title>
<style type="text/css">
body{color:#999;font:12px/1.5 Tahoma;}
#outer{width:500px;margin:0 auto;}
#outer input{padding:3px;border:1px solid #ccc;
font-family:inherit;width:220px;margin-right:10px;}
.show{font-size:30px;color:red;}
</style>
</head>
<body>
<div id="outer">
<label>
<input type="text" value="" />
<span>输入数字排序,数字之间用半角","号分隔</span>
</label>
<p><input type="button" name="" value="一键排序"/></p>
<p id="show" class="sort"></p>
</div>
<script type="text/javascript">
(function(){
//首先通过基本的dom操作取得文本框里的值
var $ = function(id){
return document.getElementById(id);
}
//取到相应的dom节点
var myInput = $("outer").getElementsByTagName("input");
var showSort = $("show");
myInput[1].onclick=function(){
//将输入的数值用,分割开来,split可以直接把字符串返回成字符串数组.
var nums = myInput[0].value.split(",");
showSort.innerHTML = bubbleSort(nums);
}
//冒泡排序的函数,自己可以调整正序或倒序,输入一个数组参数,得到返回值
function bubbleSort(arr){
for(var i=0;i<arr.length;i++){
for(var j=0,t=0;j<arr.length-1;j++){
if(arr[j]>arr[j+1]){
t = arr[j];
arr[j]=arr[j+1];
arr[j+1] =t;
}
}
}
return arr;
}
})();
</script>
</body>
</html>