PHP冒泡排序动画

index文件

   
   
   
   
   
   
   
   
   
   

   

       
       

           

           

               
• php

               
• java

               
• javascript

           

       

       

冒泡排序

       

           

               

                   

                        <?php

                       

                                $list=array(23,15,43, 25,54,2,6,82,11,5,21, 32,65);

                       

                       

                                for($i=0;$i<count($list)-1;$i++)

                       

                            {

                       

                                    for($j=0;$j<count($list)-$i-1 ;$j++)
        {
                           
            if($list[$j]>$list[$j+1])
                           
            {
                           
                $x=$list[$j];
                           
                $list[$j]=$list[$j+1];
                           
                $list[$j+1]=$x;
                           
            }
                           
        }
                           

                       

                            }
?>
                   

                   

                       

                            开始运行
                            继续运行
                       

                   

               

               

                    Java
               

           

       

   

   

       

           

           

               

23

               

15

               

43

               

25

               

54

               

2

               

6

               

82

               

11

               

5

               

21

               

32

               

65

               

               

               

           

       

   

   
   

   

       
           
       
       
           
       
       
           
       
   

   

       

       

       

       

           

           

       

   

   
   

js文件

window.onload = $(function() {
    // 双向绑定速度数据
    let vm = new Vue({
        el: "#container",
        data: {
            show: false //显示隐藏语言ul
        },
        methods: {
            // 语言切换函数
            choice() {
                if (this.show == true) {
                    $(".lange>ul").css("opacity", 1);
                } else {
                    $(".lange>ul").css("opacity", 0);
                }
            }
        },
    });
    $(function() {
        $(".start").one("click", function() { //只运行一次
            $(".boxbar").fadeIn(1000);
            var l = 0;
            $(".showLine_1").addClass("highLight");
        });
        var i = 0;
        var x1 = 0; //右移动的盒子的像素
        var x2 = 0; //左移动的盒子的像素
        var x3; //箭头右移动的盒子的像素
        var x3s = parseInt($(".boxbar .arrow_top").css("left")); //箭头初始left值
        var setCh;
        var maxCount = 12; //应该执行change()的次数
        $(".next").click(function() {
            var j = 0;
            var count = 0; //执行change()的次数
            var x = 0; //没换位置的次数
            var lenth_near = parseInt($(".boxbar #1").offset().left - ($(".boxbar #0").offset().left)); //两个盒子间的距离
            if ((i + 1) % 2 != 0) {
                var l = 0;
                $(".showLine_1").removeClass("highLight");
                $(".showLine_3").removeClass("highLight");
                $(".showLine_2").addClass("highLight");
            } else {
                setTimeout(change, 0);
            }
            var value_i = Math.floor(i / 2);
            $(".value_i").text("$i=" + value_i).fadeIn(1000);

            function change() {
                if (count >= maxCount) {
                    clearTimeout(setCh);
                }
                $(".showLine_2").removeClass("highLight");
                var l = 0;
                $(".showLine_3").addClass("highLight");
                var boxi = parseInt($(".boxbar #" + j).text());
                var boxj = parseInt($(".boxbar #" + (j + 1)).text());
                if (j < maxCount) {
                    x3 = x3s + j * lenth_near;
                    $(".arrow_top").animate({
                        left: x3
                    });
                    $(".value_j").text("$j=" + j).fadeIn(1000);
                }
                if (boxi > boxj) {
                    var lefti = parseInt($(".boxbar #" + (j + 1)).offset().left - ($(".boxbar #" + j).offset().left)); //需要移动的两个盒子的距离
                    x1 = parseInt($(".boxbar #" + j).css("left"));
                    x1 = x1 + lefti;
                    x2 = parseInt($(".boxbar #" + (j + 1)).css("left"));
                    x2 = -lefti + x2;
                    $(".boxbar #" + j).animate({
                        top: "50px"
                    }, 500).animate({
                        left: x1 + "px"
                    }, 500).animate({
                        top: "0px"
                    }, 500);
                    $(".boxbar #" + (j + 1)).animate({
                        top: "-50px"
                    }, 500).animate({
                        left: x2 + "px"
                    }, 500).animate({
                        top: "0px"
                    }, 500);
                    $(".boxbar #" + j).attr("id", "100");
                    $(".boxbar #" + (j + 1)).attr("id", j);
                    $(".boxbar #" + "100").attr("id", (j + 1));
                    setCh = setTimeout(change, 1500);
                    count++;
                } else if (j < maxCount) {
                    count++;
                    x++;
                    setTimeout(change, 1500);
                }
                if (count == maxCount) {
                    maxCount--;
                    setTimeout(change, 1500);
                }
                j++;
            }
            // setTimeout(change,0);
            i++;
        });
    })
})

css文件

html {
    background-color: #5583c3;
}

.title {
    background-color: #5583c3;
    color: #fff;
    font-family: "楷体";
    text-align: center;
    font-size: 50px;
    font-weight: 1000;
}

.left_body,
.right_body {
    margin-top: 0;
    position: relative;
    height: 658px;
    background-color: rgb(192, 200, 212);
    font-size: 16px;
    overflow: hidden;
    font-weight: 700;
    border-radius: 20px;
    border: 5px solid #fff;
}

.left_body {
    padding: 10px;
    line-height: 30px;
}

.right_body {
    padding-top: 20px;
}

.button {
    width: 104px;
    position: absolute;
    top: 30px;
    right: 20px;
}

.start,
.next {
    width: 100px;
    position: absolute;
    background-color: #5583c3;
    border: none;
    border-radius: 5px;
    border: 2px solid #fff;
    color: #fff;
}

.next {
    margin-top: 50px;
}

.boxbar {
    width: 680px;
    margin: 280px auto;
    display: none;
}

.box {
    position: relative;
    text-align: center;
    float: left;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 5px;
    color: #fff;
    background-color: #5583c3;
    border-radius: 5px;
}

.arrow_top {
    position: relative;
    margin: 0 5px;
    top: -10px;
    left: 10px;
    width: 0;
    height: 0;
    border-top: 10px solid red;
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
}

.value_i,
.value_j {
    width: 200px;
    position: relative;
    top: -260px;
    left: 10px;
    display: none;
    font-size: 30px;
    color: red;
}

.value_i {
    top: -280px;
}

.highLight {
    color: #fbff00;
    text-shadow: 0px 0px 0 #b89800, 0.5px 0.5px 0 #b39400, 1px 1px 0 #ad8f00, 1.5px 1.5px 0 #a88b00, 2px 2px 0 #a38700, 2.5px 2.5px 0 #9e8300, 3px 3px 0 #997f00, 3.5px 3.5px 0 #947a00, 4px 4px 3.5px rgba(0, 0, 0, 0.55), 4px 4px 1px rgba(0, 0, 0, 0.5);
}

@media screen and (max-width:1360px) {
    .boxbar {
        width: 520px;
    }
    .box {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0 5px;
    }
    .arrow_top {
        border-top: 5px solid red;
        border-left: 5px solid rgba(0, 0, 0, 0);
        border-right: 5px solid rgba(0, 0, 0, 0);
    }
    .value_i {
        top: -260px;
    }
    .value_j {
        top: -250px;
    }
}

@media screen and (max-width:1322px) {
    .start {
        margin-top: 20px;
    }
    .next {
        margin-top: 65px;
    }
    .value_i {
        top: -230px;
    }
    .value_j {
        top: -220px;
    }
}

@media screen and (max-width:1110px) {
    .boxbar {
        width: 312px;
    }
    .box {
        width: 20px;
        height: 20px;
        font-size: 12px;
        line-height: 20px;
        margin: 0 2px;
    }
    .arrow_top {
        left: 2px;
    }
    .value_i,
    .value_j {
        top: -195px;
        font-size: 25px;
    }
    .value_i {
        top: -215px;
    }
    .button {
        right: 5px;
    }
    .start {
        margin-top: 20px;
    }
    .next {
        margin-top: 65px;
    }
}

/* 语言切换模块 */

.lange {
    position: absolute;
    left: 8px;
    top: 30px;
}

.lange p {
    font-size: 23px;
    padding-left: 15px;
    top: -15px;
    color: rgb(92, 82, 82);
    cursor: pointer;
}

.lange ul {
    display: inline-block;
    opacity: 0;
}

.lange li {
    float: left;
    margin-left: 10px;
}