构建'人流量统计器”：从童年计数到现代网站的旅程-js教程-PHP中文网

构建'人流量统计器”：从童年计数到现代网站的旅程

王林

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

原创

903 人浏览过

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

自增函数: