建立「人流量統計器」：從童年計數到現代網站的旅程-js教程-PHP中文網

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

王林

發布： 2024-08-18 00:00:36

原創

908 人瀏覽過

$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。

自增函數: