网页实现冒泡排序,输入五个数并排序
时间: 2024-10-08 18:12:07 浏览: 12
网页上实现冒泡排序通常会涉及到前端JavaScript编程。下面是一个简单的HTML和JavaScript代码示例,它允许用户输入五个数字,并使用冒泡排序算法对它们进行排序:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冒泡排序</title>
</head>
<body>
<label for="numbers">请输入5个数字:</label><br>
<input type="number" id="numbers" placeholder="分开输入"><br>
<button onclick="bubbleSort()">排序</button>
<p id="sortedNumbers"></p>
<script>
function bubbleSort() {
const numbersInput = document.getElementById('numbers').value;
const numberArray = numbersInput.split(',').map(Number);
if (numberArray.length !== 5) {
alert("请输入5个数字!");
return;
}
let sortedArray = [...numberArray];
let swapped;
do {
swapped = false;
for (let i = 0; i < sortedArray.length - 1; i++) {
if (sortedArray[i] > sortedArray[i + 1]) {
[sortedArray[i], sortedArray[i + 1]] = [sortedArray[i + 1], sortedArray[i]];
swapped = true;
}
}
} while (swapped);
document.getElementById('sortedNumbers').innerText = "排序后的数组: " + sortedArray.join(", ");
}
</script>
</body>
</html>
```
在这个例子中,用户输入数字后点击“排序”按钮,JavaScript函数`bubbleSort`会被触发。首先将字符串转换成数组,然后应用冒泡排序算法,最后更新页面显示结果。