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

Опубликовано: 23 Декабря, 2022

В этой статье показано, как создать визуализатор алгоритма голосования Мура с помощью HTML, CSS и JavaScript. Этот алгоритм используется для элемента, который повторяется более n/2 раз. n — это размер массива для этого элемента, который должен повторяться непрерывно, поэтому это ключевой подход для этого алгоритма.

Подход: мы будем использовать тот же алгоритм, но мы будем вводить текст и шаблон, а затем мы будем вычислять массив LPS, а затем сравнивать текст и шаблон. Основная интуиция, стоящая за этим алгоритмом, заключается в том, что если элемент повторяется, то он будет повторяться N/2 раза, что у него должны быть вхождения, которые останутся в ссылочном элементе в конце при повторении по массиву. Теперь, после этого, мы начинаем обход массива, добавляя класс заголовков CSS к каждому элементу контейнера при обходе массива, а затем применяем логику алгоритма голосования Мура. Если вы не знаете логику алгоритма, прочитайте следующую статью. https://www.geeksforgeeks.org/boyer-moore-majority-voting-algorithm/. Идея статьи в основном заключается в том, что если в массиве есть элементы, которые повторяются более n/2 раз, где n — размер массива, то элемент должен быть последовательным один раз в этом конкретном массиве, чтобы появиться n/2 раза.

Шаг 1: Давайте создадим базовую структуру веб-страницы с помощью HTML.

index.html

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">Moores
        </span>Voting Algorithm
    </div>
    <div id="container"></div>
    <div class="container_2">
        <div id="votes"></div>
        <div id="candidate"></div>
        <div id="count"></div>
        <div id="message"></div>
        <div id="start">Start</div>
    </div>
</body>
 
</html>

Шаг 2: Теперь в файле style.css мы стилизуем структуру веб-страницы.

стиль.css

CSS

* {
    color: white;
}
 
#span {
    font-weight: normal;
    text-shadow: 0 0 10px cyan, 0 0 40px cyan, 0 0 80px cyan;
    letter-spacing: 2px;
}
 
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;
    align-items: center;
}
 
#container {
    width: 100%;
    margin-top: 15%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    font-size: 5vmin;
    letter-spacing: 2vmin;
    font-weight: normal;
}
 
.tile {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    padding: 1vmin;
    padding-left: 2vmin;
    border: 2px solid black;
}
 
.onover {
    color: cyan;
}
 
#candidate,
#count {
    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;
}
 
#votes,
#candidate,
#count {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vmin;
    font-size: 3vmin;
    letter-spacing: 2px;
    transition: all 0.5s ease-in-out;
}
 
#votes:hover,
#candidate:hover,
#count:hover {
    transform: scale3d(1.5);
}
 
.header {
    text-align: center;
    padding: 1vmin;
    width: 100%;
    font-size: 6vmin;
    letter-spacing: 2px;
    border-bottom: 1px solid white;
}
 
input {
    margin-top: 2vmin;
}
 
#message {
    width: 50%;
    height: 7vmin;
    margin: 3vmin;
    font-size: 5vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    color: cyan;
    font-size: 2vmin;
}
 
.cyans {
    color: cyan;
    border: 2px solid cyan;
    transition: all 0.5s ease-in-out;
}
 
.greenyellow {
    color: greenyellow;
    border: 2px solid greenyellow;
    transition: all 0.5s ease-in-out;
}
 
.normal {
    color: white;
    border: 2px solid black;
}

Шаг 3: Теперь мы увидим код JS-файла для всей логики алгоритма. Мы создали массив, когда окно загружается при нажатии кнопки запуска, мы отображаем массив, мы делаем его асинхронным, поэтому, когда отображается сообщение, мы заставляем его ждать 7000 миллисекунд, чтобы люди могли его увидеть, затем делаем отображение пустым, а затем добавляем элементы к контейнеру, используя класс плитки, теперь у нас есть функция алгоритма голосования Мура, которая найдет элемент большинства, теперь мы сначала показываем инициализированный элемент, а затем мы использовали async/await и обещания ждать его в течение времени, а затем мы повторяем его для итерации, которую мы используйте зеленый, желтый цвет границы и тот же цвет шрифта, а затем, если число присутствует, мы используем голубой цвет для цвета границы и цвета шрифта, если числа равны кандидату, и мы непрерывно отображаем голоса и кандидата, и мы будем отображать сообщение в разделе сообщения если важно, то единственное, что мы делаем, это файл javascript, но чтобы понять это, мы должны иметь краткие знания алгоритма.

script.js

Javascript

function id(id) {
    return document.getElementById(id);
}
var array = [1, 1, 2, 3, 1, 5, 1];
window.onload = () => {
    id("start").addEventListener("click", async () => {
        id("start").style.display = "none";
        id("message").innerText = "Main intuition behind this algorithm is "
            + "if a element is repeating than it will repeat N / 2 times "
            + "that it must have occurrences which will be left at the "
            + "reference element at the end when iterated over the array "
            + "How let us see!"
        await new Promise((resolve) =>
            setTimeout(() => {
                resolve();
            }, 7000)
        )
        id("start").style.display = "none";
        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];
            id("container").appendChild(tile);
            idcount++;
            MooresVoting(array, array.length);
        }
    })
 
}
const MooresVoting = async (array, size) => {
    // console.log("inside function")
    var count = 0;
    var candidate = -1;
    var votes = 0;
    id("message").innerText = "Watching the initializer elements first";
    await new Promise((resolve) =>
        setTimeout(() => {
            resolve();
        }, 2000)
    )
    id("votes").innerText = `Votes is ${votes}`;
    id("candidate").innerText = `Present Candidate
        is at index ${candidate}`;
    // id("count").innerText = `Count is ${count}`;
    await new Promise((resolve) =>
        setTimeout(() => {
            resolve();
        }, 3000)
    )
    id("message").innerText = `iterating over the array now`
    id("message").innerText = "Main intuition behind this algorithm "
        + "is if a element is repeating than it will repeat N / 2 "
        + "times that it must have occurrences which will be left at "
        + "the reference element at the end when iterated over the "
        + "array How let us see!"
    await new Promise((resolve) =>
        setTimeout(() => {
            resolve();
        }, 3000)
    )
    id("message").innerText = "";
    for (let i = 0; i < size; i++) {
        id(i).classList.add("greenyellow")
        // id(i).style.color="greenyellow";
        if (votes == 0) {
            id("votes").style.color = "Red";
            await new Promise((resolve) =>
                setTimeout(() => {
                    resolve();
                }, 3000)
            )
            id("votes").style.color = "white";
            // id("candidate").style.color="cyan";
            id("candidate").classList.add("cyan");
            id("votes").classList.add("cyan");
            // id("votes").style.color="cyan";
            await new Promise((resolve) =>
                setTimeout(() => {
                    resolve();
                }, 2000)
            )
            candidate = i;
            votes = 1;
            id("candidate").innerText = `Present Candidate is
                at index ${candidate}`;
            id("votes").innerText = `Votes is ${votes}`;
            await new Promise((resolve) =>
                setTimeout(() => {
                    resolve();
                }, 3000)
            )
            // id("candidate").style.color="white";
            // id("votes").style.color="white";
            id("candidate").classList.remove("cyan");
            id("votes").classList.remove("cyan");
        } else {
            // console.log("inside else");
            // console.log(`${i} ${candidate}`);
            console.log(`inside else ${array[i]} and
                cand ${candidate}`);
            if (array[i] == array[candidate]) {
                console.log("inside array[i]==candidate");
                id(i).style.borderColor = "cyan";
                id(i).style.color = "cyan";
                id(candidate).style.borderColor = "cyan";
                id(candidate).style.color = "cyan"
                id("votes").style.color = "cyan";
                await new Promise((resolve) => {
                    setTimeout(() => {
                      
            

                    
                                            JavaScript
                                            HTML
                                            CSS
                                    
РЕКОМЕНДУЕМЫЕ СТАТЬИЧто такое тернарный оператор?
23 Января, 2024
Ember.js Свойство содержимого ArrayProxy
24 Февраля, 2023
Ошибка «Объект не определен» при попытке повернуть объект в three.js
24 Февраля, 2023
Как изменить строку в JavaScript?
23 Февраля, 2023
Как создать массив с несколькими объектами, имеющими несколько вложенных пар ключ-значение в JavaScript?
23 Февраля, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023


    


        
            
                
                    
                        
                        < PROGLER >
                    
                
                
                    
                        Общее
                        
                        Контакты
                        Политика конфиденциальности
                    
                    
                        Обучение
                        Блог
                    
                
            
            
                © progler.ru 2024. Все права защищены.