网页图片
在输入框中输入数组，点击测试就能动态图演示排序过程.
由于不方便录制视频，就以图片的形式呈现：
冒泡排序（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>
