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

简介

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

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

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

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

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

让计数变得有趣的功能

1. 实时计数
   只需单击“增量”按钮即可跟踪您的计数。不再需要手动统计！
   increment
   此功能会在您每次单击按钮时立即更新显示的计数。

2. 保存并查看条目
   记录您的计数并查看以前条目的历史记录。非常适合随着时间的推移跟踪多次计数。
   save
   

   
   保存的计数将添加到按钮下方的列表中，以便您查看计数历史记录。

3. 优雅且响应式设计
   该应用程序可无缝适应各种屏幕尺寸，无论您是在台式机还是移动设备上，都能确保干净、现代的界面。
   应用程序的设计在所有设备上看起来都很棒，增强了用户体验。

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

html：应用程序的主干，提供基本结构。

    <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&amp;family=lato:wght@300;400;700&amp;display=swap" rel="stylesheet"><title>the people counter</title><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>

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 应用程序。

结论

人数统计器证明了简单的想法如何可以通过一些编码知识演变成实用的工具。无论您是跟踪人、物体，还是只是享受数字带来的乐趣，这个应用程序都为您的古老习惯提供了现代解决方案。