js做一个页面内展示排序方法
时间: 2023-08-09 14:08:52 浏览: 47
好的,我可以为您提供一个简单的页面内展示排序的方法,使用 JavaScript 实现。下面是一个示例代码:
HTML:
```html
<div>
<h3>待排序数组:</h3>
<p id="original-array"></p>
</div>
<div>
<h3>排序后数组:</h3>
<p id="sorted-array"></p>
</div>
<button onclick="sortArray()">排序</button>
```
JavaScript:
```javascript
let array = [5, 8, 3, 1, 4, 9, 2, 7, 6];
// 显示待排序数组
document.getElementById("original-array").innerHTML = array.join(", ");
function sortArray() {
// 使用 Array.sort() 方法进行排序
array.sort(function(a, b) {
return a - b;
});
// 显示排序后的数组
document.getElementById("sorted-array").innerHTML = array.join(", ");
}
```
这段代码会在页面上展示一个按钮和两个段落,其中第一个段落显示待排序数组,第二个段落会在排序后显示排序后的数组。当点击按钮时,会触发 `sortArray()` 函数,该函数使用 JavaScript 的 `Array.sort()` 方法对数组进行排序,然后更新页面上的元素以显示排序后的结果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)