JS算法--插入排序_js按顺序插值-优快云博客

本文链接：https://blog.youkuaiyun.com/waer_/article/details/89684670

本文介绍了插入排序算法，将其比作扑克牌排序，并详细解释了其工作原理。同时，提供了一个使用HTML、CSS和JavaScript实现的交互式排序示例，用户可以在网页上输入待排序数组，点击按钮后查看排序过程及结果。

1，插入排序相当于扑克牌排序，首先左手只有一张扑克牌，右手陆续摸牌按从小到大的顺序插入到左手的扑克牌中。
2，写split函数的因为没有区分大小写逗号造成转换后的数组只为一个长度为1，值为一串字符的数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: beige;
            text-align: center;
            width: 50%;
            height: 200px;
            padding: 150px;
            margin:100px;
        }
        input[type="text"]{
            border: 1px solid #ccc;
            padding: 12px 20px;
            font-size: 1.2em;
            color: #444;
            width: 100%;
            border-radius: 4px;
        }
        input[type="button"] {
            float: left;
            width: 20%;
            background-color: cadetblue;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        input[type="button"]:hover {
            background-color: #45a049;
        }
        p{
            font-size: 1.2em;
            float: right;
        }
    </style>
</head>
<body>
    <div>
        <input id="aa" type="text" placeholder="输入需要排序的数组（每个数用逗号隔开）">
        <input type="button" value="排序" onclick="sort()">
        <p id="result">result</p>
    </div>
    <script>
        function sort() {
            var str=document.getElementById("aa").value;
            var arr=str.split(",");//注意区分中分逗号和英文逗号
            var tmp;
            for(let i=1;i<arr.length;i++){
                for(let j=i;j>0;j--){
                    if(arr[j]<arr[j-1]){
                        tmp=arr[j];
                        arr[j]=arr[j-1];
                        arr[j-1]=tmp;
                    }
                }
            }
            document.getElementById("result").innerText=arr;
        }
    </script>
</body>
</html>

在这里插入图片描述