极客教程如何使用HTML CSS和Javascript制作Kadanes算法可视化器
在这篇文章中，我们将看到如何使用HTML、CSS和Javascript制作Kadanes算法可视化器。
方法：
Kadanes算法用于计算连续子数组中的最大和。我们基本上会使用相同的算法，并且使用Javascript和CSS来显示可视化效果。当我们遍历数组时，我们将使用青色边框和青色字体颜色来显示，并显示当前和最大和。要了解更多关于Kadanes算法的信息，请参考https://www.geeksforgeeks.org/largest-sum-contiguous-subarray/。
Kadane算法的简单思路是查找数组中所有正连续段，并跟踪所有正连续段中的最大和。每次获得一个正和时，将其与当前最大和进行比较，并且如果大于前一个最大和，则更新最大和。
步骤1： 在这一步中，我们首先使用HTML创建网页的结构。我们创建了一个带有id为header的标题，id内部有一个span元素，以便我们可以将其样式设置为漂亮的发光文本，而标题id不会发光，它看起来好看。我们创建了一个包含数组当前和以及最大和的容器，然后有一个启动按钮，当点击时会显示Kadanes算法的工作方式，现在让我们来看看CSS。
HTML
<!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">
<link href=
"https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap"
rel="stylesheet" />
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="header">
<span id="span">
Kadanes
</span>
Algorithm
</div>
<div id="container"></div>
<div class="container_2">
<div id="currentsum"></div>
<div id="answer"></div>
<!-- <input id="input" type="text"
placeholder="Enter the Array"> -->
<!-- <div id="push">Push</div> -->
<div id="start">Start</div>
</div>
</body>
</html>
步骤2： 我们将设置黑色背景，因此我们将每个元素的文本颜色设置为白色，以便显示出来，然后对于span，我们必须让它发光，所以我们设置一个文本阴影，设置HTML背景颜色和字体系列，现在对于body，我们确保一切保持居中并设置flex-direction为center，对于容器，我们也给它一些位置，同样对于容器，我们给它一个字母间距，以使其看起来整洁，我们制作一个瓷砖，并确保每个显示的元素都是使用瓷砖对称我们设置onhover并将颜色更改为青色，然后我们以常规方式为每个元素设置样式。
CSS
* {
color: white;
}
#span {
font-weight: normal;
text-shadow: 0 0 10px cyan,
0 0 40px cyan,
0 0 80px cyan;
}
html {
background-color: black;
font-family: "Open sans", sans-serif;
}
body {
display: flex;
flex-direction: column;
align-items: center;
height: 100vmin;
}
.container_2 {
display: flex;
flex-direction: column;
}
#container {
width: 100%;
margin-top: 15%;
display: flex;
justify-content: center;
flex-direction: row;
font-size: 5vmin;
letter-spacing: 2vmin;
font-weight: normal;
}
.tile {
/* width: 5vmin; */
height: 5vmin;
margin: 10px;
text-align: center;
height: fit-content;
}
.onover {
color: cyan;
}
#answer {
font-size: 5vmin;
}
#start {
align-self: center;
background-color: black;
font-size: 3vmin;
box-sizing: border-box;
padding: 1vmin;
color: white;
cursor: pointer;
border: none;
margin-top: 2vmin;
transition: 0.5s ease-in-out;
font-weight: bold;
letter-spacing: 4px;
}
#start:hover {
transform: scale(1.5);
text-shadow: 0 0 10px cyan,
0 0 20px cyan,
0 0 40px cyan;
}
#array {
display: flex;
font-size: 10vmin;
}
#currentsum,
#answer {
padding: 1vmin;
font-size: 3vmin;
letter-spacing: 2px;
}
.header {
text-align: center;
padding: 1vmin;
width: 100%;
font-size: 6vmin;
letter-spacing: 2px;
border-bottom: 1px solid white;
}
input {
margin-top: 2vmin;
}
步骤3： 现在script.js将包含它的主要逻辑。我们创建了一个返回id的函数。我们创建了一个包含负数和较少元素的数组，以便观众可以理解。然后我们创建了一个当前总和和最大总和。我们创建了一个当前总和的函数。我们在数组上运行了一个循环。我们使用setTimeout创建了一个延迟一段时间后解析的回调函数的promise对象，以便在一段时间后暂停代码执行，目前的时间是1秒。每次我更改数字时，我们都会暂停1秒钟的代码。然后我们将array[i]添加到当前总和中，然后显示当前总和。
JavaScript
function id(id) {
return document.getElementById(id);
}
var array = [5, 4, 6, -3, 4, -1];
var maxsumcontainer = [];
let curr_sum = 0; let max_sum = 0;
const kadanes = async (array, arrayLength) => {
console.log("inside");
for (let i = 0; i < arrayLength; i++) {
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 1000)
)
curr_sum = curr_sum + array[i];
id("currentsum").innerText = `Current Sum : {curr_sum}`
maxsumcontainer[i] = i;
id(i).style.color = "cyan";
// id(i).style.textAlign="center"
id(i).style.border = "2px solid cyan"
if (curr_sum>max_sum) {
max_sum = curr_sum;
id("answer").innerText = `Maximum Sum :{max_sum}`;
}
if (curr_sum < 0) {
curr_sum = 0
}
}
// id("container").style.textShadow="0 0 10px cyan
//,0 0 40px cyan, 0 0 80px cyan;"
id("container").style.color = "red";
id("container").innerText = "Ended"
id("answer").innerText = `Maximum Sum : ${max_sum}`;
}
window.onload = () => {
id("start").addEventListener('click', () => {
id("start").style.display = "none";
// id("input").style.display="none"
console.log(array);
let idcount = 0;
for (let i = 0; i < array.length; i++) {
let tile = document.createElement('span');
tile.id = idcount;
tile.classList.add("tile");
tile.innerText = array[i];
// tile.style.margin="2px";
// tile.style.padding="1vmin"
id("container").appendChild(tile);
idcount++;
}
kadanes(array, array.length);
})
}
输出：
