🎃个人专栏:
🐬 算法设计与分析:算法设计与分析_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>