html、js、css写一个算法演示
时间: 2023-12-26 18:04:38 浏览: 25
以下是一个简单的快速排序算法演示,使用HTML、CSS和JavaScript编写:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>快速排序演示</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<h1>快速排序演示</h1>
<div class="input">
<label for="input-array">输入数组:</label>
<input type="text" id="input-array">
<button onclick="quickSort()">排序</button>
</div>
<div class="output">
<label for="output-array">输出数组:</label>
<input type="text" id="output-array" readonly>
</div>
<div class="visualization">
<p>排序过程:</p>
<div id="visualization-array" class="array"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
.container {
margin: auto;
max-width: 800px;
}
.input {
margin-bottom: 20px;
}
.output {
margin-bottom: 20px;
}
.visualization {
margin-bottom: 20px;
}
.array {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
margin-bottom: 10px;
background-color: lightgray;
border: 1px solid gray;
}
.array-item {
width: 30px;
height: 30px;
margin: 0 5px;
background-color: gray;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
```
JavaScript代码:
```
function quickSort() {
let inputArray = document.getElementById("input-array").value.split(",").map(Number);
let outputArray = new Array(inputArray.length);
let visualizationArray = document.getElementById("visualization-array");
visualizationArray.innerHTML = "";
for (let i = 0; i < inputArray.length; i++) {
let arrayItem = document.createElement("div");
arrayItem.className = "array-item";
arrayItem.style.width = inputArray[i] * 10 + "px";
arrayItem.innerText = inputArray[i];
visualizationArray.appendChild(arrayItem);
}
quickSortHelper(inputArray, 0, inputArray.length - 1, outputArray, visualizationArray);
document.getElementById("output-array").value = outputArray.join(",");
}
function quickSortHelper(inputArray, start, end, outputArray, visualizationArray) {
if (start >= end) {
return;
}
let pivotIndex = partition(inputArray, start, end, visualizationArray);
quickSortHelper(inputArray, start, pivotIndex - 1, outputArray, visualizationArray);
quickSortHelper(inputArray, pivotIndex + 1, end, outputArray, visualizationArray);
}
function partition(inputArray, start, end, visualizationArray) {
let pivot = inputArray[end];
let pivotIndex = start;
for (let i = start; i < end; i++) {
if (inputArray[i] < pivot) {
[inputArray[i], inputArray[pivotIndex]] = [inputArray[pivotIndex], inputArray[i]];
pivotIndex++;
}
}
[inputArray[end], inputArray[pivotIndex]] = [inputArray[pivotIndex], inputArray[end]];
let arrayItems = visualizationArray.getElementsByClassName("array-item");
[arrayItems[pivotIndex].style.width, arrayItems[end].style.width] = [arrayItems[end].style.width, arrayItems[pivotIndex].style.width];
[arrayItems[pivotIndex], arrayItems[end]] = [arrayItems[end], arrayItems[pivotIndex]];
outputArray[pivotIndex] = pivot;
return pivotIndex;
}
```
在这个演示中,用户可以输入一个由逗号分隔的整数数组,然后点击“排序”按钮进行快速排序。排序过程会在可视化区域中演示,每一次交换都会调整数组中的条目的宽度和位置。排序完成后,输出数组将显示在输出区域中。