java冒泡排序以及优化，并用vue+element在网页上进行可视化排序

目录

网页图片：

冒泡排序（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

（只写了冒泡）