Как сделать визуализатор алгоритма Каданеса с помощью HTML CSS и Javascript?

В этой статье мы увидим, как создать визуализатор алгоритма Каданеса с использованием HTML, CSS и Javascript.

Подход:

Алгоритм Каданеса используется для вычисления наибольшей суммы в непрерывном подмассиве. В основном мы будем использовать тот же алгоритм, и мы будем использовать JavaScript и CSS, чтобы показать визуализацию. Когда мы перебираем массив и собираемся показать его с голубым цветом границы и голубым цветом шрифта, мы показываем текущую сумму и максимальную сумму. Чтобы узнать больше об алгоритме kadanes, обратитесь к https://www.geeksforgeeks.org/largest-sum-contiguous-subarray/.

Простая идея алгоритма Кадане состоит в том, чтобы искать все положительные непрерывные сегменты массива. И следите за максимальной суммой смежных сегментов среди всех положительных сегментов. Каждый раз, когда мы получаем положительную сумму, сравниваем ее с максимальной суммой на данный момент и обновляем максимальную сумму, если она больше предыдущей.

Шаг 1: На этом шаге мы сначала создадим структуру веб-страницы с помощью HTML. Мы сделали заголовок с идентификатором заголовка, а внутри идентификатора мы создали элемент span, чтобы мы могли стилизовать его как красивый светящийся текст, и идентификатор заголовка не будет светиться, он будет выглядеть хорошо, мы создали контейнер, который будет иметь текущая сумма массива, а затем максимальная сумма в качестве их дочернего элемента div, затем у нас есть кнопка запуска, которая при нажатии показывает, как работает алгоритм kadanes, теперь давайте поговорим о CSS.

Шаг 2: У нас будет черный фон, поэтому мы задаем цвет текста как белый для каждого элемента, чтобы он отображался, а затем для диапазона мы должны заставить его светиться, поэтому мы даем тень текста, мы устанавливаем цвет фона HTML и семейство шрифтов. теперь для тела мы удостоверяемся, что все остается в центре, и устанавливаем flex-direction в качестве центра, а для контейнера также мы придаем ему некоторую позицию. То же самое касается контейнера, мы задаем ему интервал между буквами, чтобы он выглядел аккуратно, мы делаем плитку и убеждаемся каждый отображаемый элемент имеет плитку для симметрии, которую мы устанавливаем при наведении курсора и меняем цвет на голубой, затем мы обычно оформляем каждый элемент.

Шаг 3: Теперь script.js будет содержать свою основную логику. Мы сделали функцию, которая возвращает id. Мы сделали массив с отрицательными и меньшим количеством элементов, чтобы зритель мог понять, а затем мы создали текущую сумму и максимальную сумму, мы создали текущую сумму функции, мы запустили цикл для нашего массива, мы сделали обещание с settimeout, которое запускает обратный вызов, разрешаемый через некоторое время. время, поэтому он останавливает код на прошедшее время задержки, которое на данный момент составляет 1 секунду, и мы останавливаем код на 1 секунду каждый раз, когда я меняю, а затем мы добавляем массив [i] к текущей сумме, а затем отображаем текущую сумму.

Выход: