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>