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

CSS
对于应用程序的样式，您可以使用 CSS 使其具有视觉吸引力和响应能力。（由于本节更多地关注 JavaScript，因此我将在这里跳过详细的 CSS。）

如何使用应用程序

增加计数:
点击“递增”按钮，计数加1。显示的数字会实时更新。

保存计数:
单击“保存”按钮记录当前计数。计数将添加到先前条目的列表中，并且显示将重置为 0。

查看以前的条目：
保存的计数将显示在“以前的条目”部分下方，您可以在其中查看计数历史记录。

经验教训

构建人数统计器是一次富有洞察力的体验，特别是在学习了 Scrimba 教程之后。它强化了 HTML、CSS 和 JavaScript 中的关键概念，并演示了如何创建功能性、响应式 Web 应用程序。

结论

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

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

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

发布于2024-09-02

$Building \$

介绍

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

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

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

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

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

让计数变得有趣的功能

实时计数
只需单击“增量”按钮即可跟踪您的计数。不再需要手动统计！

每次单击按钮时，此功能都会立即更新显示的计数。
保存并查看条目
记录您的计数并查看以前条目的历史记录。非常适合跟踪一段时间内的多次计数。

保存的计数将添加到按钮下方的列表中，以便您查看计数历史记录。
优雅的响应式设计
该应用程序可无缝适应各种屏幕尺寸，无论您是在台式机还是移动设备上，都能确保干净、现代的界面。
该应用程序的设计在所有设备上看起来都很棒，增强了用户体验。

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

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



    
    
    
    
    The People Counter


    
        
            The People Counter
        
        
            
                
                    0
                
            
            
                
                
            
            
                Previous Entries

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;：每次调用函数时将计数变量加1。
countEl.textContent = count;：更新 countEl 元素中显示的计数以反映新值。

保存功能:

let countStr = count " - ";：根据当前计数创建一个字符串，并附加破折号进行分隔。
saveEl.textContent = countStr;：将新计数字符串添加到 saveEl 元素中已保存计数的现有列表中。
countEl.textContent = 0;：保存后将显示的计数重置为0。
count = 0;：将计数变量重置为 0 以重新开始下一个计数会话。

如何使用应用程序

增加计数:
点击“递增”按钮，计数加1。显示的数字会实时更新。

保存计数:
单击“保存”按钮记录当前计数。计数将添加到先前条目的列表中，并且显示将重置为 0。

查看以前的条目：
保存的计数将显示在“以前的条目”部分下方，您可以在其中查看计数历史记录。

经验教训

结论

版本声明本文转载于：https://dev.to/blessy-b-sherin/building-the-people-counter-a-journey-from-childhood-counting-to-modern-website-5bhb?1如有侵犯，请联系[email protected]删除