CSS
Для стилизации приложения вы можете использовать CSS, чтобы сделать его визуально привлекательным и отзывчивым. (Поскольку этот раздел больше посвящен JavaScript, я пропущу здесь подробное описание CSS.)

JavaScript
Привнесение интерактивности в приложение с помощью динамической функциональности.

let count = 0let countEl = document.getElementById(\\\"count-el\\\")let saveEl = document.getElementById (\\\"save-el\\\")function increment() {       count  = 1    countEl.textContent = count}function save() {    let countStr = count   \\\" - \\\"    saveEl.textContent  = countStr    countEl.textContent = 0    count = 0}

Объяснение:

Объявление переменных:

Функция приращения:

сохранить функцию:

Как использовать приложение

Увеличить счетчик:
Нажмите кнопку «Увеличить», чтобы увеличить счетчик на 1. Отображаемое число будет обновляться в режиме реального времени.

Сохраните счет:
Нажмите кнопку «Сохранить», чтобы записать текущий счетчик. Счетчик будет добавлен к списку предыдущих записей, и дисплей сбросится до 0.

Просмотреть предыдущие записи:
Сохраненные счетчики появятся под разделом «Предыдущие записи», где вы сможете просмотреть историю своих счетчиков.

Извлеченные уроки

Создание счетчика посетителей было очень полезным опытом, особенно после урока по Scrimba. Он закрепил ключевые понятия HTML, CSS и JavaScript и продемонстрировал, как создать функциональное, адаптивное веб-приложение.

Заключение

Счетчик людей служит свидетельством того, как простые идеи могут превратиться в практические инструменты при наличии некоторых знаний в области программирования. Независимо от того, отслеживаете ли вы людей, объекты или просто развлекаетесь с числами, это приложение предлагает современное решение старой привычки.

","image":"http://www.luping.net/uploads/20240902/172524384466d521c4a3f5f.jpg","datePublished":"2024-09-02T10:24:04+08:00","dateModified":"2024-09-02T10:24:04+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
Онлайн-инструменты
Учебник по программному обеспечению
Навигация по сайту
программирование
титульная страница > программирование > Создание «Счетчика посетителей»: путь от подсчета в детстве к современному веб-сайту

Создание «Счетчика посетителей»: путь от подсчета в детстве к современному веб-сайту

Опубликовано 2 сентября 2024 г.
Просматривать:525

Building \

Введение

Вы когда-нибудь считали людей или предметы просто ради развлечения? В детстве я, конечно, так и поступал, будь то количество проезжающих мимо машин или количество людей в комнате. Эта простая привычка легла в основу моего проекта: The People Counter.

Основной целью создания The People Counter было погрузиться в JavaScript, понять его синтаксис и освоиться с его работой. Хотя я назвал его «Счетчик людей», эта концепция универсальна и может быть адаптирована к любому типу счетчика — будь то автомобильный счетчик, домашний счетчик, счетчик ирисок или даже счетчик со звездами. По сути, это приложение-счетчик, которое помогает понять основы программирования на JavaScript.

Этот проект был создан с использованием ресурсов учебной платформы Scrimba, которая предоставила ценную информацию и рекомендации на протяжении всего процесса разработки.

Нажмите, чтобы увидеть приложение в действии!

Счетчик посетителей предназначен для простого и эффективного способа отслеживания и управления счетчиками, демонстрируя при этом возможности HTML, CSS и JavaScript.

Функции, которые делают счет увлекательным

  1. Подсчет в реальном времени
    Следите за своим счетом простым нажатием кнопки «Приращение». Больше никакого ручного подсчета!

    Эта функция мгновенно обновляет отображаемое количество при каждом нажатии кнопки.

  2. Сохранить и просмотреть записи
    Зарегистрируйте свои подсчеты и просмотрите историю предыдущих записей. Идеально подходит для отслеживания нескольких счетов с течением времени.


    Сохраненные счетчики добавляются в список под кнопкой, что позволяет вам просмотреть историю счетчиков.

  3. Элегантный и адаптивный дизайн
    Приложение легко адаптируется к экранам различных размеров, обеспечивая понятный и современный интерфейс независимо от того, используете ли вы настольный компьютер или мобильное устройство.
    Дизайн приложения отлично смотрится на всех устройствах, что повышает удобство использования.

Технологии, лежащие в основе приложения

HTML : основа приложения, обеспечивающая основную структуру.



    
    
    
    
    The People Counter


    

        

            
The People Counter

        

        

            

                

                    
0

                

            

            

                
                
            

            

                
Previous Entries

CSS
Для стилизации приложения вы можете использовать CSS, чтобы сделать его визуально привлекательным и отзывчивым. (Поскольку этот раздел больше посвящен JavaScript, я пропущу здесь подробное описание CSS.)

JavaScript
Привнесение интерактивности в приложение с помощью динамической функциональности.

let count = 0

let countEl = document.getElementById("count-el")

let saveEl = document.getElementById ("save-el")


function increment() {   
    count  = 1
    countEl.textContent = count
}

function save() {
    let countStr = count   " - "
    saveEl.textContent  = countStr
    countEl.textContent = 0
    count = 0
}

Объяснение:

Объявление переменных:

  • let count = 0;: инициализирует переменную count для отслеживания количества приращений.
  • let countEl = document.getElementById("count-el");: извлекает элемент HTML, в котором отображается текущий счетчик, и присваивает его countEl.
  • let saveEl = document.getElementById("save-el");: извлекает элемент HTML, в котором будут отображаться сохраненные значения, и назначает его saveEl.

Функция приращения:

  • count = 1;: увеличивает переменную count на 1 при каждом вызове функции.
  • countEl.textContent = count;: обновляет отображаемое количество в элементе countEl, чтобы отразить новое значение.

сохранить функцию:

  • let countStr = count " - ";: создает строку из текущего счетчика и добавляет тире для разделения.
  • saveEl.textContent = countStr;: добавляет новую строку счетчика к существующему списку сохраненных счетчиков в элементе saveEl.
  • countEl.textContent = 0;: сбрасывает отображаемый счетчик на 0 после сохранения.
  • count = 0;: сбрасывает переменную count на 0, чтобы начать новый сеанс подсчета.

Как использовать приложение

Увеличить счетчик:
Нажмите кнопку «Увеличить», чтобы увеличить счетчик на 1. Отображаемое число будет обновляться в режиме реального времени.

Сохраните счет:
Нажмите кнопку «Сохранить», чтобы записать текущий счетчик. Счетчик будет добавлен к списку предыдущих записей, и дисплей сбросится до 0.

Просмотреть предыдущие записи:
Сохраненные счетчики появятся под разделом «Предыдущие записи», где вы сможете просмотреть историю своих счетчиков.

Извлеченные уроки

Создание счетчика посетителей было очень полезным опытом, особенно после урока по Scrimba. Он закрепил ключевые понятия HTML, CSS и JavaScript и продемонстрировал, как создать функциональное, адаптивное веб-приложение.

Заключение

Счетчик людей служит свидетельством того, как простые идеи могут превратиться в практические инструменты при наличии некоторых знаний в области программирования. Независимо от того, отслеживаете ли вы людей, объекты или просто развлекаетесь с числами, это приложение предлагает современное решение старой привычки.

Заявление о выпуске Эта статья воспроизведена по адресу: https://dev.to/blessy-b-sherin/building-the-people-counter-a-journey-from-childhood-counting-to-modern-website-5bhb?1 Если есть любое нарушение, пожалуйста, свяжитесь с [email protected], чтобы удалить
Последний учебник Более>
КлассификацияБолее>
изучать японский учить корейский учить китайский учить иностранный язык игра Общая проблема Технологическая периферия ИИ Учебник по программному обеспечению программирование статья

Изучайте китайский

инструментБолее>
Декодирование изображения в формате base64
Китайский Пиньинь
Кодировка Юникод
JS-обфускация, шифрование, сжатие
Инструмент шестнадцатеричного шифрования URL-адресов
Инструмент преобразования кодировки UTF-8
Онлайн-инструменты кодирования и декодирования Ascii
Инструмент шифрования MD5
Онлайн-инструмент для шифрования и дешифрования хеша/хеш-текста
Онлайн-шифрование SHA

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3