1.比較相鄰的兩個元素，如果前一個比後一個大，則交換位置。
2.第一輪的時候最後一個元素應該是最大的一個。
3.按照步驟一的方法進行相鄰兩個元素的比較，這個時候由於最後一個元素已經是最大的了，所以最後一個元素不用比較。
<!DOCTYPE html>
<html>
<head>
<title>js冒泡</title>
<style type="text/css">
input{
height: 40px;
}
button{
margin: 0;
padding: 0;
width: 60px;
height: 40px;
background-color: orange;
border: 1px solid transparent;
outline: none;
}
#txt{
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<input type="text" name="" id="inp">
<button id="maopao">冒泡排序</button><br><br>
<textarea id="txt">...</textarea>
</body>
<script type="text/javascript">
window.onload = function(){
var oInp = document.getElementById('inp');
var oMp = document.getElementById('maopao');
oMp.onclick = function() {
flag = 1;//flag用來標記某一趟排序是否發生交換
var result = oInp.value.split(",")
console.log(result);//打印排序前的數組
for (var i = 0; i < result.length; i++) {//排序趟數
var flag = 0;//flag置爲0，如果本趟排序沒有發生交換，這不會執行下一趟排序
for (var j = 0; j < result.length-i-1; j++) {
if (result[j]>result[j+1]) {
temp = result[j];
result[j] = result[j+1];
result[j+1] = temp;
flag = 1;//flag置爲1，表示本趟排序發生了交換
}
}
if(flag==0) break;
var time = i+1;
console.log('第'+time+'趟排序結果：'+result);//打印排序後的數組
}
}
}
</script>
</html>
