首页 > 文章 > 前端

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

来源：dev.to

时间：2024-08-20 12:18:58 116浏览收藏

一分耕耘，一分收获！既然都打开这篇《构建“人流量统计器”：从童年计数到现代网站的旅程》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

简介

是否曾经发现自己只是为了好玩而数人或物？我小时候确实这么做过，无论是经过的汽车数量还是房间里有多少人。这个简单的习惯激发了我的项目背后的想法：人数统计器。

创建人数统计器的主要目标是深入研究 javascript、理解其语法并熟悉其流程。虽然我将其命名为“人流计数器”，但这个概念是通用的，可以适用于任何类型的计数器——无论是汽车计数器、房屋计数器、太妃糖计数器，甚至是明星计数器。它本质上是一个计数器应用程序，有助于掌握 javascript 编程的基础知识。

该项目是使用 scrimba 学习平台的资源构建的，该平台在整个开发过程中提供了宝贵的见解和指导。

点击查看正在运行的应用程序！

人数统计器旨在提供一种简单、有效的方式来跟踪和管理计数，同时展示 html、css 和 javascript 的强大功能。

让计数变得有趣的功能

实时计数
只需单击“增量”按钮即可跟踪您的计数。不再需要手动统计！
<button id="increment-btn" onclick="increment()">increment</button>
此功能会在您每次单击按钮时立即更新显示的计数。
保存并查看条目
记录您的计数并查看以前条目的历史记录。非常适合随着时间的推移跟踪多次计数。
<button id="save-btn" onclick="save()">save</button>
<div id="save-el" class="entry-list"></div>
保存的计数将添加到按钮下方的列表中，以便您查看计数历史记录。
优雅且响应式设计
该应用程序可无缝适应各种屏幕尺寸，无论您是在台式机还是移动设备上，都能确保干净、现代的界面。
应用程序的设计在所有设备上看起来都很棒，增强了用户体验。

为应用程序提供动力的技术

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。

自增函数: