超过 70% 的初学者会从像计数器这样的交互式项目开始学习 JavaScript。在本文中，我们将创建一个简单的计数器应用程序，它允许用户增加、减少和重置数值——同时还能跟踪点击次数，并在达到设定限制后重置。
我们将要构建什么
我们将构建一个简单的 web 应用程序，它具有以下功能：
- 显示当前计数值的计数器。
- 用于增加和减少计数的按钮。
- 显示增加和减少操作的点击次数，并在达到 10 次点击后重置。
!counter使用 HTML CSS 和 JavaScript 的简单计数器
简单计数器 – HTML 设置
index.html
CODEBLOCK_d39e5be8
在这个例子中：
- 类名为 container 的
充当应用程序的包装器。
- id="count" 的
标签显示当前的计数器值。
- 两个
- 标签内的 元素显示增加和减少操作的点击次数。
简单计数器 – CSS 样式
style.css
CODEBLOCK_8eb22ef0
代码概览：- 对 body 的样式旨在使应用程序在屏幕上居中，并配有浅色背景。
- .container 的样式赋予应用程序卡片般的外观，具有白色背景和圆角。
- .counter 类增大了字体大小，以便更好地查看计数器值。
- button 的样式添加了 padding、margin, 和 hover effect 以增强用户交互。
- .clicks class 对按钮下方的点击次数显示进行了样式设置。
简单计数器 – JavaScript 逻辑
计数器应用程序的 JavaScript 处理增加和减少计数器值的逻辑。它更新显示的计数器，并跟踪增加和减少按钮上的点击次数。
script.js
CODEBLOCK_4dcae345
代码概览：- Variables c、ci 和 cd 分别代表计数器、增加点击次数和减少点击次数。
- count、 incCount 和 decCount 存储对显示计数器和点击次数的 DOM 元素的引用。
- inc() function 增加计数器 并跟踪增加点击次数，在 10 次点击后重置点击计数。
- dec() function 减少计数器，确保它不会低于零，并跟踪减少点击次数，在 10 次点击后重置点击计数。
- update() 函数更新 DOM 中显示的值。
完整代码
index.html
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f4f8;
}
.container {
text-align: center;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background
- id="count" 的