平铺卡片交换动画：

网格卡片交换动画：

 排序算法动画：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #con {
            position: relative;
            width: 800px;
            height: 200px;
        }

        #con>div {
            /* width: 30px; */
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: 10px;
            position: absolute;
            transition: left .7s;
        }

        .target {
            background-color: orange;
        }

        .normal {
            background-color: rgba(98, 231, 202, 0.747);
        }

        .target-for-choose-sort {
            background-color: rgba(224, 39, 215, 0.774);
        }
    </style>
</head>

<body>
    <div id="con">
    </div>
</body>

</html>
<script src="./jquery.3.2.1.min.js"></script>
<script>
let offsetX=80+10;//每个元素的之间的间距。宽度加空隙
let con = $('#con')[0]
let divs = con.getElementsByTagName('div')
let arr = [3, 6, 2, 4, 4, 2, 13, 9, 21, 11, 1]
let max = arr.reduce((a, b) => Math.max(a, b))
for (let i = 0; i < arr.length; i++) {
    let height=arr[i] / max * 180 + 20+'px';
    // let left=10 + i * 40 + 'px';
    let left=10 + i * offsetX + 'px';
    // $(con).append(`<div class="normal" style="height:${height};left:${left}">${arr[i]}</div>`);
    $(con).append(`<div class="normal" style="left:${left}">${arr[i]}</div>`);
}
setTimeout(()=>{
    changePos(1,4)
},2000);
// chooseSort()
// bubbleSort()
// insertSort()
//气泡排序
function bubbleSort() {
    let i = 0
    let j = 0
    divs[j].className = 'target'
    divs[j + 1].className = 'target'
    let timer = setInterval(() => {
        if (i !== arr.length - 1) {
            if (j !== arr.length - 1 - i && arr[j] > arr[j + 1]) {
                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
                changePos(j, j + 1)
            }
            if (++j == arr.length - 1 - i) {
                i++
                j = 0
            }
            if (j < arr.length - 1) {
                setTimeout(() => {
                    setColor(j, j + 1)
                }, 900)
            }
        } else {
            clearInterval(timer)
            console.log('排序完毕')
        }
    }, 1000)
}

//插入排序
function insertSort() {
    let i = 0;
    let j = 1;
    divs[i].className = 'target'
    divs[j].className = 'target'
    let timer = setInterval(() => {
        if (i !== arr.length - 1) {
            if (j !== 0) {
                if (arr[j] < arr[j - 1]) {
                    [arr[j], arr[j - 1]] = [arr[j - 1], arr[j]]
                    changePos(j, j - 1)
                    j--
                } else {
                    j = ++i + 1
                }
            } else {
                j = ++i + 1
            }
            if (j > 0 && j < arr.length) {
                setTimeout(() => {
                    setColor(j - 1, j)
                }, 900)
            }
        }
    }, 1000)
}
//移动位置
function changePos(i, j) {
    divs[i].style.left = 10 + j * offsetX + 'px'
    divs[j].style.left = 10 + i * offsetX + 'px'
    let a = divs[i].cloneNode(true)
    let b = divs[j].cloneNode(true)
    setTimeout(() => {
        con.replaceChild(a, divs[j])
        con.replaceChild(b, divs[i])
    }, 700)
}
//设置颜色
function setColor(i, j, targetIndex) {
    for (let i = 0; i < arr.length; i++) {
        divs[i].className = 'normal'
        // $(divs[i]).addClass('normal');
    }
    // $(divs[i]).addClass('target')
    // $(divs[j]).addClass('target')
    divs[i].className = 'target'
    divs[j].className = 'target'
    if (targetIndex !== undefined)
        divs[targetIndex].className = 'target-for-choose-sort'
        // $(divs[targetIndex]).addClass('target-for-choose-sort')
}
//选择排序
function chooseSort() {
    let i = 0
    let j = 1
    let index = i
    divs[i].className = 'target'
    divs[j].className = 'target'
    let timer = setInterval(() => {
        if (i !== arr.length - 1) {
            if (j !== arr.length) {
                if (arr[j] < arr[index]) {
                    index = j
                }
                j++
            } else {
                if (index !== i) {
                    [arr[i], arr[index]] = [arr[index], arr[i]]
                    changePos(i, index)
                }
                j = ++i + 1
                index = i
            }
            if (j < arr.length) {
                setTimeout(() => {
                    setColor(i, j, index)
                }, 900)
            }
        } else {
            clearInterval(timer)
            console.log('排序完毕')
        }
    }, 1000)
}
</script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #con {
            position: relative;
            width: 800px;
            height: 200px;
        }

        #con>div {
            /* width: 30px; */
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: 10px;
            position: absolute;
            /* transition: left .7s; */
            transition: left .7s,top .7s;

            font-size: 24px;
            font-weight: bold;
            padding: 4px;
            background-color: #e7e7e7;
            -o-object-fit: contain;
            object-fit: contain;
            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
            border-radius: 10%;
        }

        .target {
            background-color: orange;
        }

        .normal {
            background-color: rgba(98, 231, 202, 0.747);
        }

        .target-for-choose-sort {
            background-color: rgba(224, 39, 215, 0.774);
        }
    </style>
</head>

<body>
    <div id="con">
    </div>
</body>

</html>
<script src="./jquery.3.2.1.min.js"></script>
<script>
let offsetX=80+10;//每个元素的之间的间距。宽度加空隙
let offsetY=80+10;
let con = $('#con')[0]
let divs = con.getElementsByTagName('div')
let arr = [3, 6, 2, 4, 4, 2, 13, 9, 21, 11, 1]
let max = arr.reduce((a, b) => Math.max(a, b))
//平铺
// for (let i = 0; i < arr.length; i++) {
//     let height=arr[i] / max * 180 + 20+'px';
//     // let left=10 + i * 40 + 'px';
//     let left=10 + i * offsetX + 'px';
//     // $(con).append(`<div class="normal" style="height:${height};left:${left}">${arr[i]}</div>`);
//     $(con).append(`<div class="normal" style="left:${left}">${arr[i]}</div>`);
// }
//网格。超出换行
let list=sliceArr(arr,5);
console.log(list)
list.map((item,index)=>{
    item.map((v,o)=>{
        let i=((index*5)+o) + 0;
        let row=Math.trunc(i/5)+1;//行数。
        let col=i%5;//求余是列数。
        let left=10 + (col) * offsetX + 'px'
        let top=10 + (row-1) * offsetY + 'px'
        $(con).append(`<div class="normal" style="left:${left};top:${top}">${v}</div>`);
        // let left=10 + o * offsetX + 'px';
        // let top=10 + index * offsetY + 'px';
        // $(con).append(`<div class="normal" style="left:${left};top:${top}">${v}</div>`);
    });
});
// setTimeout(()=>{
//     changePos(1,8)
// },2000);
setInterval(()=>{
    let p1=rand(0,arr.length-1);
    let p2=rand(0,arr.length-1);
    changePos(p1,p2)
},2000);
// chooseSort()
// bubbleSort()
// insertSort()
//气泡排序
function bubbleSort() {
    let i = 0
    let j = 0
    divs[j].className = 'target'
    divs[j + 1].className = 'target'
    let timer = setInterval(() => {
        if (i !== arr.length - 1) {
            if (j !== arr.length - 1 - i && arr[j] > arr[j + 1]) {
                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
                changePos(j, j + 1)
            }
            if (++j == arr.length - 1 - i) {
                i++
                j = 0
            }
            if (j < arr.length - 1) {
                setTimeout(() => {
                    setColor(j, j + 1)
                }, 900)
            }
        } else {
            clearInterval(timer)
            console.log('排序完毕')
        }
    }, 1000)
}

//移动位置
function changePos(i, j) {
    $('#con div').css('z-index','');
    let row=Math.trunc(j/5)+1;//行数。
    let col=j%5;//求余是列数。
    divs[i].style.left = 10 + (col) * offsetX + 'px'
    divs[i].style.top = 10 + (row-1) * offsetY + 'px'
    $(divs[i]).css('z-index',9);
    let row2=Math.trunc(i/5)+1;//行数。
    let col2=i%5;//求余是列数。
    console.log(row2,col2)
    divs[j].style.left = 10 + (col2) * offsetX + 'px'
    divs[j].style.top = 10 + (row2-1) * offsetY + 'px'
    $(divs[j]).css('z-index',9);
    // divs[i].style.left = 10 + j * offsetX + 'px'
    // divs[j].style.left = 10 + i * offsetX + 'px'
    let a = divs[i].cloneNode(true)
    let b = divs[j].cloneNode(true)
    setTimeout(() => {
        con.replaceChild(a, divs[j])
        con.replaceChild(b, divs[i])
    }, 700)
}
//设置颜色
function setColor(i, j, targetIndex) {
    for (let i = 0; i < arr.length; i++) {
        divs[i].className = 'normal'
    }
    divs[i].className = 'target'
    divs[j].className = 'target'
    if (targetIndex !== undefined)
        divs[targetIndex].className = 'target-for-choose-sort'
}
//将数组拆分成固定长的数组
function sliceArr(arr, size) {
    // arr是传入的要切割的数组
    // size是每个切割的数组有多少项
    var newArr = [];
    for (var x = 0; x < Math.ceil(arr.length / size); x++) {
        var start = x * size;
        var end = start + size;
        newArr.push(arr.slice(start, end));
    }
    return newArr;
}
//生成随机数（下面也有一个）
function rand(min, max) {
    return parseInt(Math.random() * (max - min + 1) + min);
}
</script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #con {
            position: relative;
            width: 800px;
            height: 200px;
        }

        #con>div {
            width: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: 10px;
            position: absolute;
            transition: left .7s;
        }

        .target {
            background-color: orange;
        }

        .normal {
            background-color: rgba(98, 231, 202, 0.747);
        }

        .target-for-choose-sort {
            background-color: rgba(224, 39, 215, 0.774);
        }
    </style>
</head>

<body>
    <div id="con">
    </div>
</body>

</html>
<script src="./jquery.3.2.1.min.js"></script>
<script>
let con = $('#con')[0]
let divs = con.getElementsByTagName('div')
let arr = [3, 6, 2, 4, 4, 2, 13, 9, 21, 11, 1]
let max = arr.reduce((a, b) => Math.max(a, b))
for (let i = 0; i < arr.length; i++) {
    let height=arr[i] / max * 180 + 20+'px';
    let left=10 + i * 40 + 'px';
    $(con).append(`<div class="normal" style="height:${height};left:${left}">${arr[i]}</div>`);
}
chooseSort()
// bubbleSort()
// insertSort()
//气泡排序
function bubbleSort() {
    let i = 0
    let j = 0
    divs[j].className = 'target'
    divs[j + 1].className = 'target'
    let timer = setInterval(() => {
        if (i !== arr.length - 1) {
            if (j !== arr.length - 1 - i && arr[j] > arr[j + 1]) {
                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
                changePos(j, j + 1)
            }
            if (++j == arr.length - 1 - i) {
                i++
                j = 0
            }
            if (j < arr.length - 1) {
                setTimeout(() => {
                    setColor(j, j + 1)
                }, 900)
            }
        } else {
            clearInterval(timer)
            console.log('排序完毕')
        }
    }, 1000)
}
//选择排序
function chooseSort() {
    let i = 0
    let j = 1
    let index = i
    divs[i].className = 'target'
    divs[j].className = 'target'
    let timer = setInterval(() => {
        if (i !== arr.length - 1) {
            if (j !== arr.length) {
                if (arr[j] < arr[index]) {
                    index = j
                }
                j++
            } else {
                if (index !== i) {
                    [arr[i], arr[index]] = [arr[index], arr[i]]
                    changePos(i, index)
                }
                j = ++i + 1
                index = i
            }
            if (j < arr.length) {
                setTimeout(() => {
                    setColor(i, j, index)
                }, 900)
            }
        } else {
            clearInterval(timer)
            console.log('排序完毕')
        }
    }, 1000)
}
//插入排序
function insertSort() {
    let i = 0;
    let j = 1;
    divs[i].className = 'target'
    divs[j].className = 'target'
    let timer = setInterval(() => {
        if (i !== arr.length - 1) {
            if (j !== 0) {
                if (arr[j] < arr[j - 1]) {
                    [arr[j], arr[j - 1]] = [arr[j - 1], arr[j]]
                    changePos(j, j - 1)
                    j--
                } else {
                    j = ++i + 1
                }
            } else {
                j = ++i + 1
            }
            if (j > 0 && j < arr.length) {
                setTimeout(() => {
                    setColor(j - 1, j)
                }, 900)
            }
        }
    }, 1000)
}
//移动位置
function changePos(i, j) {
    divs[i].style.left = 10 + j * 40 + 'px'
    divs[j].style.left = 10 + i * 40 + 'px'
    let a = divs[i].cloneNode(true)
    let b = divs[j].cloneNode(true)
    setTimeout(() => {
        con.replaceChild(a, divs[j])
        con.replaceChild(b, divs[i])
    }, 700)
}
//设置颜色
function setColor(i, j, targetIndex) {
    for (let i = 0; i < arr.length; i++) {
        divs[i].className = 'normal'
        // $(divs[i]).addClass('normal');
    }
    // $(divs[i]).addClass('target')
    // $(divs[j]).addClass('target')
    divs[i].className = 'target'
    divs[j].className = 'target'
    if (targetIndex !== undefined)
        divs[targetIndex].className = 'target-for-choose-sort'
        // $(divs[targetIndex]).addClass('target-for-choose-sort')
}
</script>

# javascript # 游戏 # 动画
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

avatar 魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。

avatar 魔乐社区
cover

小杰机器学习（seven）——贝叶斯分类

avatar 魔乐社区