【基于HTML5的网页设计及应用】——数组的排序和去重

Y小夜

于 2024-03-29 10:22:35 发布

阅读量691

点赞数 17

分类专栏：基于HTML5的网页设计及应用文章标签： html5 前端 html

本文链接：https://blog.csdn.net/shsjssnn/article/details/136308313

版权

基于HTML5的网页设计及应用专栏收录该内容

25 篇文章 2 订阅

订阅专栏

🎃个人专栏：

🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客

🐳Java基础：Java基础_IT闫的博客-CSDN博客

🐋c语言：c语言_IT闫的博客-CSDN博客

🐟MySQL：数据结构_IT闫的博客-CSDN博客

🐠数据结构：数据结构_IT闫的博客-CSDN博客

💎C++：C++_IT闫的博客-CSDN博客

🥽C51单片机：C51单片机（STC89C516）_IT闫的博客-CSDN博客

💻基于HTML5的网页设计及应用：基于HTML5的网页设计及应用_IT闫的博客-CSDN博客

🥏python：python_IT闫的博客-CSDN博客

🐠离散数学：离散数学_IT闫的博客-CSDN博客

🥽Linux：Linux_Y小夜的博客-CSDN博客

🚝Rust：Rust_Y小夜的博客-CSDN博客

欢迎收看，希望对大家有用！

🎯功能简介

这段代码实现了一个简单的网页功能，可以对包含数字的数组进行翻转、排序和去重操作。用户可以通过点击按钮来触发相应的操作，并在页面上看到操作后的结果。

具体功能包括：
1. 展示初始数组信息：页面上展示了一个包含学号对应的数组 `[2,2,1,4,5,1,0,8,0,]`。
2. 翻转数组功能：点击"翻转数组"按钮后，将数组进行反转操作，并在页面上显示反转后的数组。
3. 排序数组功能：点击"从小到大对数组排序"按钮后，将数组按照从小到大的顺序进行排序，并在页面上显示排序后的数组。
4. 数组去重功能：点击"数组去重"按钮后，将数组中重复的元素去除，只保留唯一的元素，并在页面上显示去重后的数组。

用户可以通过这个页面方便地对数组进行不同的操作，以便进行数据处理和分析。

🎯代码解析

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组翻转、排序、去重</title>
    <style>
        /* 省略了样式部分 */
    </style>
</head>

<body>
    <table>
        
    </table>

    <script>
        // 省略了 JavaScript 部分
    </script>

</body>

</html>
这段代码定义了一个简单的 HTML 页面，包括了文档声明，字符集、视口设置等 meta 标签，以及标题和一些 CSS 样式。在 body 部分，定义了一个包含按钮和文字信息的表格，并且引入了 JavaScript 代码。
<script>
    var arr=[2,2,1,4,5,1,0,8,0,5,4,3];
    //反转数组
    function reverseArr(){
        var reverseArr=arr.reverse();
        document.getElementById('reverseArr').innerHTML=reverseArr;
    }
    //从小到大对数组排序
    function sortArr(){
        var sortArr=arr.sort();
        document.getElementById('sortArr').innerHTML=sortArr;
    }
    //数组去重
    function uniqueArr(){
        var uniqueArr=[];
        for(var i=0;i<arr.length;i++){
            if(uniqueArr.indexOf(arr[i])===-1){
                uniqueArr.push(arr[i]);
            }
        }
        document.getElementById("uniqueArr").innerHTML=uniqueArr;
    }
</script>
这部分代码首先定义了一个名为 arr 的数组，包含一组数字。然后定义了三个函数 reverseArr、sortArr 和 uniqueArr，分别用于实现数组反转、排序和去重功能。这些函数分别通过操作数组和修改页面元素内容来实现对应的功能。

这段代码在页面加载时会把按钮和数组信息展示出来，并且定义了点击按钮时触发的函数来完成对数组的操作，并实时更新页面展示。

🎯核心代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组翻转、排序、去重</title>
    <style>
        /* 省略了样式部分 */
    </style>
</head>

<body>
    <table>
        <!-- 省略了表格内容 -->
    </table>

    <script>
        // 省略了 JavaScript 部分
    </script>

</body>

</html>