首頁 > 文章 > web前端 > 建立「人流量統計器」：從童年計數到現代網站的旅程

建立「人流量統計器」：從童年計數到現代網站的旅程

王林原創: 2024-08-18 00:00:36877瀏覽

$Building \$

Introduction

Ever find yourself counting people or objects just for fun? I certainly did as a child, whether it was the number of cars passing by or how many people were in a room. This simple habit sparked the idea behind my project: The People Counter.

The primary goal of creating The People Counter was to dive into JavaScript, understand its syntax, and get comfortable with its flow. While I named it “The People Counter,” the concept is versatile and can be adapted to any type of counter—be it a car counter, house counter, toffee counter, or even a star counter. It’s fundamentally a counter app that helps in grasping the basics of JavaScript programming.

This project was built using resources from the Scrimba learning platform, which provided valuable insights and guidance throughout the development process.

Click to view the app in action!

The People Counter is designed to provide an easy, effective way to track and manage counts, all while showcasing the power of HTML, CSS, and JavaScript.

Features That Make Counting Fun

Real-Time Counting
Keep track of your count with a simple click of the "Increment" button. No more manual tallying!

This feature updates the displayed count instantly each time you click the button.
Save and View Entries
Log your counts and view a history of previous entries. Perfect for keeping track of multiple counts over time.

已儲存的計數將會新增到按鈕下方的清單中，以便您查看計數歷史記錄。
優雅且響應靈敏的設計
該應用程式可無縫適應各種螢幕尺寸，無論您是在桌上型電腦還是行動裝置上，都能確保乾淨、現代的介面。
應用程式的設計在所有裝置上看起來都很棒，增強了使用者體驗。

為應用程式提供動力的技術

HTML：應用程式的主幹，提供基本結構。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
    <title>The People Counter</title>
</head>
<body>
    <div class="app-container">
        <header>
            <h1>The People Counter</h1>
        </header>
        <main class="counter-container">
            <div class="counter-display">
                <div class="counter-frame">
                    <div id="count-el">0</div>
                </div>
            </div>
            <div class="controls">
                <button id="increment-btn" onclick="increment()">
                    <span>Increment</span>
                </button>
                <button id="save-btn" onclick="save()">
                    <span>Save</span>
                </button>
            </div>
            <div class="entries">
                <h2>Previous Entries</h2>
                <div id="save-el" class="entry-list"></div>
            </div>
        </main>
    </div>
    <script src="index.js"></script>
</body>
</html>

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;：將計數變數重設為 0，以便為下一個計數會話重新開始。

如何使用應用程式

增加計數:
點選「遞增」按鈕，計數加1。顯示的數字會即時更新。

保存計數：
按一下“儲存”按鈕記錄目前計數。計數將被添加到先前條目的清單中，並且顯示將重設為 0。

查看先前的條目：
儲存的計數將顯示在「先前的條目」部分下方，您可以在其中查看您的計數歷史記錄。

經驗教訓

建立人數統計器是一次富有洞察力的體驗，尤其是在學習了 Scrimba 教程之後。它強化了 HTML、CSS 和 JavaScript 中的關鍵概念，並示範如何建立功能齊全、響應式的 Web 應用程式。

結論

人數統計器證明了簡單的想法如何可以透過一些編碼知識演變成實用的工具。無論您是追蹤人、物體，還是只是享受數字帶來的樂趣，這個應用程式都為古老的習慣提供了現代解決方案。

以上是建立「人流量統計器」：從童年計數到現代網站的旅程的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html dash String count for while Session using class Interface number function this history display idea

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：在 Astro Build 中為 i 建立動態路線語言下一篇：在 Astro Build 中為 i 建立動態路線語言

看更多