javascript实现-冒泡排序算法

最新推荐文章于 2025-05-13 23:49:48 发布

原创最新推荐文章于 2025-05-13 23:49:48 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #冒泡排序 #算法

javascript 专栏收录该内容

25 篇文章

订阅专栏

本文提供了一个使用JavaScript实现的冒泡排序算法示例，通过DOM操作实现数组排序并展示结果，有助于理解冒泡排序的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//以下代码是自己用冒泡算法结合dom操作实现的排序操作。熟悉js功能的朋友可以直接用sort()内置函数实现数组的排序，此方法是自己写的冒泡排序，有助于理解算法的思想.

代码可直接复制使用，已经优化精简//

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡排序</title>
    <style type="text/css">
    body{color:#999;font:12px/1.5 Tahoma;}
    #outer{width:500px;margin:0 auto;}
    #outer input{padding:3px;border:1px solid #ccc;
    font-family:inherit;width:220px;margin-right:10px;}
    .show{font-size:30px;color:red;}
</style>
</head>
<body>
<div id="outer">
    <label>
    <input type="text" value="" /> 
    <span>输入数字排序，数字之间用半角","号分隔</span>
    </label>
    <p><input type="button" name="" value="一键排序"/></p>
    <p id="show" class="sort"></p>
</div>

<script type="text/javascript">
    (function(){
        //首先通过基本的dom操作取得文本框里的值
        var $ = function(id){
            return document.getElementById(id);
        }
        //取到相应的dom节点
        var myInput = $("outer").getElementsByTagName("input");
        var showSort = $("show");

        myInput[1].onclick=function(){
            //将输入的数值用,分割开来，split可以直接把字符串返回成字符串数组.
            var nums = myInput[0].value.split(",");
            showSort.innerHTML = bubbleSort(nums);
        }

        //冒泡排序的函数，自己可以调整正序或倒序，输入一个数组参数，得到返回值
        function bubbleSort(arr){
            for(var i=0;i<arr.length;i++){
                for(var j=0,t=0;j<arr.length-1;j++){
                    if(arr[j]>arr[j+1]){
                        t = arr[j];
                        arr[j]=arr[j+1];
                        arr[j+1] =t;
                    }
                }
            }
            return arr;
        }
})();
</script>
</body>
</html>