CSS
앱 스타일을 지정하려면 CSS를 사용하여 시각적으로 매력적이고 반응성이 뛰어나도록 만들 수 있습니다. (이 섹션은 JavaScript에 더 중점을 두기 때문에 여기에서는 자세한 CSS를 건너뛰겠습니다.)

자바스크립트
동적 기능을 통해 앱에 상호작용성을 구현합니다.

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"}}
"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
온라인 도구
소프트웨어 튜토리얼
사이트 탐색
프로그램 작성
첫 장 > 프로그램 작성 > \"피플 카운터\" 구축: 어린 시절부터 현대 웹사이트까지의 여정

\"피플 카운터\" 구축: 어린 시절부터 현대 웹사이트까지의 여정

2024-09-02에 게시됨
검색:799

Building \

소개

단지 재미로 사람이나 사물의 숫자를 세어 본 적이 있나요? 지나가는 차의 수나 방에 사람이 몇 명이나 있었는지는 어렸을 때 확실히 그랬습니다. 이 단순한 습관이 내 프로젝트인 The People Counter라는 아이디어를 촉발시켰습니다.

The People Counter를 만드는 주요 목표는 JavaScript를 자세히 살펴보고 구문을 이해하고 흐름에 익숙해지는 것이었습니다. 제가 "피플 카운터(The People Counter)"라고 명명했지만 이 개념은 다목적이며 자동차 카운터, 하우스 카운터, 토피 카운터 또는 스타 카운터 등 모든 유형의 카운터에 적용할 수 있습니다. 기본적으로 JavaScript 프로그래밍의 기본을 이해하는 데 도움이 되는 카운터 앱입니다.

이 프로젝트는 개발 프로세스 전반에 걸쳐 귀중한 통찰력과 지침을 제공한 Scrimba 학습 플랫폼의 리소스를 사용하여 구축되었습니다.

앱이 실제로 작동하는 모습을 보려면 클릭하세요!

인원 계수기는 HTML, CSS, JavaScript의 강력한 기능을 보여주면서 카운트를 추적하고 관리하는 쉽고 효과적인 방법을 제공하도록 설계되었습니다.

재미있는 숫자 세기를 위한 기능

  1. 실시간 집계
    "증가" 버튼을 한 번만 클릭하면 카운트를 추적할 수 있습니다. 더 이상 수동으로 집계하지 마세요!

    이 기능은 버튼을 클릭할 때마다 표시된 개수를 즉시 업데이트합니다.

  2. 항목 저장 및 보기
    개수를 기록하고 이전 항목 기록을 확인하세요. 시간이 지남에 따라 여러 카운트를 추적하는 데 적합합니다.


    저장된 카운트가 버튼 아래 목록에 추가되어 카운트 기록을 검토할 수 있습니다.

  3. 우아하고 반응성이 뛰어난 디자인
    이 앱은 다양한 화면 크기에 원활하게 적응하여 데스크톱이든 모바일 장치이든 깨끗하고 현대적인 인터페이스를 보장합니다.
    앱 디자인이 모든 기기에서 멋지게 나타나 사용자 경험이 향상됩니다.

앱을 강화하는 기술

HTML : 애플리케이션의 백본으로 필수 구조를 제공합니다.



    
    
    
    
    The People Counter


    

        

            
The People Counter

        

        

            

                

                    
0

                

            

            

                
                
            

            

                
Previous Entries

CSS
앱 스타일을 지정하려면 CSS를 사용하여 시각적으로 매력적이고 반응성이 뛰어나도록 만들 수 있습니다. (이 섹션은 JavaScript에 더 중점을 두기 때문에 여기에서는 자세한 CSS를 건너뛰겠습니다.)

자바스크립트
동적 기능을 통해 앱에 상호작용성을 구현합니다.

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;: 증분 수를 추적하기 위해 변수 카운트를 초기화합니다.
  • 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 16진수 암호화 도구
UTF-8 인코딩 변환 도구
온라인 Ascii 인코딩 및 디코딩 도구
MD5 암호화 도구
해시/해시 텍스트 온라인 암호화 및 암호 해독 도구
온라인 SHA 암호화

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3