目录
网页图片：
冒泡排序（java版本）
冒泡排序优化（java版本）
前端代码
VUE.JS
element-ui
部分html
script
全部代码：
网页图片：
在输入框中输入数组，点击测试就能动态图演示排序过程.
由于不方便录制视频，就以图片的形式呈现：
冒泡排序（java版本）
package suanfa;
import java.util.Arrays;
import java.util.Scanner;
public class xishuarr {
public static void main(String[] args) {
System.out.println("输入要排序的值，输入的每个值用逗号隔开:");
Scanner sc = new Scanner(System.in);
String str = sc.nextLine();
// 将字符串按照","拆分成字符串数组
String[] strArray = str.split(",");
// 新建数组用来存储拆分出来的每个值
int[] array = new int[strArray.length];
// 给数组循环遍历赋值
for (int i = 0; i < strArray.length; i++) {
array[i]=Integer.parseInt(strArray[i]); }
sort(array);
System.out.println("排序后的数组：" + Arrays.toString(array)); }
/** *用冒泡排序算法对数组进行排序 * @param array */
private static void sort(int[] array) {
int count=0; int cnt=0; int x=0;
// array.length - 1是因为最后一轮不需要排序
for (int i=0; i < array.length-1; i++) {
// array.length - i是因为每一轮都能确定排序好一个数
for (int j=0; j < array.length-1- i; j++) { count++; int
temp=0; if (array[j]> array[j + 1]) {
cnt++;
temp = array[j];
array[j] = array[j + 1];
array[j + 1] = temp;
}}
System.out.println("第"+(i+1)+":"+Arrays.toString(array));
x=i;
}
System.out.println("运行次数:"+count+ " 执行了" + (x + 1) + "趟 排序" + "交换次数:"+cnt);
}
}
冒泡排序优化（java版本）
package suanfa;
import java.util.Arrays;
import java.util.Scanner;
public class xishuarr {
public static void main(String[] args) {
System.out.println("输入要排序的值，输入的每个值用逗号隔开:");
Scanner sc = new Scanner(System.in);
String str = sc.nextLine();
// 将字符串按照","拆分成字符串数组
String[] strArray = str.split(",");
// 新建数组用来存储拆分出来的每个值
int[] array = new int[strArray.length];
// 给数组循环遍历赋值
for (int i = 0; i < strArray.length; i++) {
array[i]=Integer.parseInt(strArray[i]); }
sort(array);
System.out.println("排序后的数组：" + Arrays.toString(array)); }
/** *用冒泡排序算法对数组进行排序 * @param array */
private static void sort(int[] array) {
int count=0; int cnt=0; int x=0;boolean flag=false;
// array.length - 1是因为最后一轮不需要排序
for (int i=0; i < array.length-1; i++) {
// array.length - i是因为每一轮都能确定排序好一个数
for (int j=0; j < array.length-1- i; j++) { count++; int
temp=0; if (array[j]> array[j + 1]) {
cnt++;flag=true;
temp = array[j];
array[j] = array[j + 1];
array[j + 1] = temp;
}}
System.out.println("第"+(i+1)+":"+Arrays.toString(array));
x=i;
if(!flag) { break; }else { flag=false; }
}
System.out.println("运行次数:"+count+ " 执行了" + (x + 1) + "趟 排序" + "交换次数:"+cnt);
}
}
前端代码
VUE.JS
可以取 vue的官网下载 :VUE.JS
element-ui
elementui下载地址：UNPKG - element-ui
部分html
<script src="js/vue.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="element-ui/lib/index.js"></script>
<style>
.el-header {
color: #333;
text-align: center;
line-height: 60px;
}
.el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
/* text-align: center;
line-height: 160px; */
}
body>.el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
/* From cssbuttons.io by @Sujitkavaiya */
.card {
padding: 8px 18px 1px 18px;
overflow-y: auto;
width: 190px;
height: 254px;
background: rgb(255, 255, 255);
/* border-radius: 0.4em; */
border-radius: 30px;
box-shadow: 0.3em 0.3em 0.7em #00000015;
transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: rgb(250, 250, 250) 0.2em solid;
word-break: break-all;
}
.card:hover {
border: #006fff 0.2em solid;
}
.button {
padding-top: 2%;
padding-bottom: 5%;
display: flex;
justify-content: center;
align-items: center;
}
.biao {
width: 200px;
margin: auto;
appearance: button;
background-color: #1899D6;
border: solid transparent;
border-radius: 16px;
border-width: 0 0 4px;
box-sizing: border-box;
color: #FFFFFF;
cursor: pointer;
/* display: inline-block; */
font-size: 15px;
font-weight: 700;
letter-spacing: .8px;
line-height: 20px;
margin: 0;
outline: none;
overflow: visible;
padding: 13px 19px;
text-align: center;
text-transform: uppercase;
touch-action: manipulation;
transform: translateZ(0);
transition: filter .2s;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
}
.biao:after {
background-clip: padding-box;
background-color: #1CB0F6;
border: solid transparent;
border-radius: 16px;
border-width: 0 0 4px;
bottom: -4px;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.biao:main,
.biao:focus {
user-select: auto;
}
.biao:hover:not(:disabled) {
filter: brightness(1.1);
}
.biao:disabled {
cursor: auto;
}
.biao:active:after {
border-width: 0 0 0px;
}
.biao:active {
padding-bottom: 10px;
}
</style>
script
<script>
new Vue({
el: "#app",
// 页面加载后
mounted() {
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
onSubmit() {
console.log(this.formInline.user);
var a = this.formInline.user
var arr = a.split(",");
console.log(arr);
localStorage.setItem("arr", arr);
location.href = "maopao.html";
},
onSubmit2() {
console.log(this.formInline.user);
var a = this.formInline.user
var arr = a.split(",");
console.log(arr);
localStorage.setItem("arr", arr);
location.href = "maopao2.html";
},
},
data() {
return {
formInline: {
user: ''
},
activeName: 'second',
dialogVisible: false,
aa1: false,
aa2: false,
aa3: false,
dd1: false,
dd2: false,
a11: false,
a12: false,
a13: false,
a1: false,
a2: false,
b: false,
c: false,
d: false,
};
}
})
</script>
全部代码：
链接：https://pan.baidu.com/s/1d0mtm9QqrEVL5rT600kSTQ
提取码：ac1v
（只写了冒泡）
