当前位置： 首页 > news >正文

如何用JavaScript编写一个简单的计数器

news 文章来源：https://blog.csdn.net/Jiaberrr/article/details/142675149 2025/1/9 17:15:59

在网页开发中，计数器是一种常见的功能，它可以帮助我们记录点击次数、显示时间等。下面我将介绍如何在HTML页面中使用JavaScript实现一个基本的计数器。如图：

1、 创建HTML结构

首先，我们需要创建一个基础的HTML结构来容纳我们的计数器按钮和数字显示区域。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>简单计数器</title>
<style>/* 计数器容器样式 */
#counter-container {display: flex;justify-content: space-between;align-items: center;width: 200px;border: 2px solid #333; /* 边框样式 */padding: 10px;background-color: #f0f0f0; /* 背景颜色 */border-radius: 5px; /* 圆角边框 */
}/* 按钮样式 */
button {width: 50px;height: 50px;border: none;background-color: #4CAF50; /* 按钮背景颜色 */color: white; /* 按钮文字颜色 */font-size: 20px;cursor: pointer;border-radius: 5px; /* 圆角边框 */
}button:hover {background-color: #45a049; /* 鼠标悬停时的按钮背景颜色 */
}/* 计数器显示样式 */
#counter {font-size: 24px;margin: 0 10px; /* 计数器和按钮之间的间距 */min-width: 30px; /* 确保计数器有足够的空间显示 */text-align: center;background-color: #fff; /* 计数器背景颜色 */border: 1px solid #ddd; /* 计数器边框 */padding: 5px;border-radius: 5px; /* 圆角边框 */
}</style>
</head>
<body>
<div id="counter-container">
<button id="decrease">-</button>
<div id="counter">0</div>
<button id="increase">+</button>
</div>
<script src="counter.js"></script>
</body>
</html>

在这个例子中，我们使用了三个元素：两个按钮和一个用于显示当前计数的 <div> 元素。我们还添加了一些CSS样式来美化界面。

2、编写JavaScript代码

接下来，我们将编写JavaScript代码来实现计数器的逻辑。这段代码将被保存在 counter.js 文件中。

// 获取DOM元素
const decreaseBtn = document.getElementById('decrease');
const counterDisplay = document.getElementById('counter');
const increaseBtn = document.getElementById('increase');// 初始化计数器值
let count = 0;// 更新计数器显示函数
function updateCounter() {counterDisplay.textContent = count;
}// 减少计数器值的函数
function decreaseCount() {if (count > 0) { // 确保不会出现负数count--;updateCounter();}
}// 增加计数器值的函数
function increaseCount() {count++;updateCounter();
}// 为按钮绑定事件监听器
decreaseBtn.addEventListener('click', decreaseCount);
increaseBtn.addEventListener('click', increaseCount);// 初始时更新一次计数器显示
updateCounter();

在这段代码中，我们定义了几个函数：

  • updateCounter() 用于更新计数器的显示。
  • decreaseCount() 和 increaseCount() 分别处理减少和增加计数器值的功能。
  • 我们还为减号和加号按钮分别绑定了点击事件，当它们被点击时会调用相应的函数来改变计数器的值。

3、运行测试

现在，如果你打开这个HTML文件并在浏览器中运行，你应该可以看到一个可以正常工作的计数器。每次点击“+”或“-”按钮时，中间的数字都会相应地增加或减少。

通过以上步骤，我们就完成了一个简单的计数器功能的实现。希望这篇文章能帮助你更好地理解如何使用JavaScript操作DOM以及如何进行基本的交互编程。

 

 

相关文章：

如何用JavaScript编写一个简单的计数器

在网页开发中&#xff0c;计数器是一种常见的功能&#xff0c;它可以帮助我们记录点击次数、显示时间等。下面我将介绍如何在HTML页面中使用JavaScript实现一个基本的计数器。如图&#xff1a; 1、 创建HTML结构 首先&#xff0c;我们需要创建一个基础的HTML结构来容纳我们的计…...

编程日记 2024/10/3 4:14:04

uniapp中实现评分组件，多用于购买商品后，对商品进行评价等场景

前言 uni-rate是uniapp框架中提供的一个评分组件。它可以用于用户评价、打分等场景。uni-rate组件可以根据设定的星星总数&#xff0c;展示用户评分的效果&#xff0c;用户可以通过点击星星或滑动星星的方式进行评分。同时&#xff0c;uni-rate组件也支持自定义星星图标、星星…...

编程日记 2024/10/3 4:06:55

算法笔记（三）——前缀和算法

算法笔记&#xff08;三&#xff09;——前缀和算法 文章目录 算法笔记&#xff08;三&#xff09;——前缀和算法一维前缀和二维前缀和寻找数组的中心下标除自身以外数组的乘积和为 K 的子数组和可被 K 整除的子数组连续数组矩阵区域和 前缀和算法是一种用空间换时间的算法&am…...

编程日记 2024/10/3 4:04:53

Nginx技术深度解析与实战应用

Nginx技术深度解析与实战应用 Nginx是一款轻量级、高性能的Web服务器、反向代理服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器&#xff0c;由俄罗斯的程序设计师Igor Sysoev开发。Nginx以其内存占用少、启动迅速、高并发能力强等特性&#xff0c;在互联网项目…...

编程日记 2024/10/3 4:03:52

Maven Surefire Plugin

Maven Surefire Plugin 最新版本新特性详解 Maven Surefire Plugin 是用于运行单元测试和集成测试的重要工具&#xff0c;支持 JUnit、TestNG 等测试框架。插件的新版本引入了许多新特性和配置选项&#xff0c;这些功能提升了测试执行的性能、灵活性和并发能力。在本节中&…...

编程日记 2024/10/3 4:01:50

八、跳跃、闪避

一、人物跳跃功能 1、动画 设置一个bool值 条件设置为true 2、逻辑 实现跳跃&#xff0c;一定有IsGround&#xff1b;判断是否为地面&#xff0c;进行跳跃功能 写一个跳跃和一个条约结束方法 跳跃设置为false&#xff0c;结束设置为true 3、代码 public void Jump() {if…...

编程日记 2024/10/3 4:00:48

使用辅助分类器 GAN 进行条件图像合成

Conditional Image Synthesis with Auxiliary Classifier GANs Conditional Image Synthesis with Auxiliary Classifier GANs&#xff08;简称AC-GANs&#xff09;是一种用于改善生成对抗网络&#xff08;GANs&#xff09;进行图像合成的方法。在AC-GANs中&#xff0c;判别器…...

编程日记 2024/10/3 3:58:47

C#中的static关键字：静态成员与单例模式的实现

在C#中&#xff0c;static 关键字是一个非常重要的概念&#xff0c;它用于声明静态成员&#xff0c;这些成员属于类本身&#xff0c;而不是类的任何特定实例。使用 static 关键字可以定义静态类、静态字段、静态属性、静态方法等。此外&#xff0c;理解静态成员也对于实现如单例…...

编程日记 2024/10/3 3:56:45

【优选算法】（第八篇）

目录 串联所有单词的⼦串&#xff08;hard&#xff09; 题目解析 讲解算法原理 编写代码 最⼩覆盖⼦串&#xff08;hard&#xff09; 题目解析 讲解算法原理 编写代码 串联所有单词的⼦串&#xff08;hard&#xff09; 题目解析 1.题目链接&#xff1a;. - 力扣&#…...

编程日记 2024/10/3 3:54:43

告别PPT熬夜！Kimi+AIPPT一键生成PPT，效率upup！

Kimi AiPPT 一键生成PPT 还在为做PPT熬夜加班吗&#xff1f;还在为PPT排版抓狂吗&#xff1f;现在&#xff0c;有一个好消息要告诉所有“打工人”&#xff01;Kimi和AIPPT强强联手&#xff0c;推出了一键生成PPT功能&#xff0c;让你告别PPT制作的痛苦&#xff01; 以前做…...

编程日记 2024/10/3 3:53:42

大语言模型在构建UNSPSC 分类数据中的应用

UNSPSC 是联合国标准产品和服务代码。UNSPSC由联合国开发计划署&#xff08;UNDP&#xff09;和Dun & Bradstreet公司&#xff08;D & B&#xff09;于1998年联合制定&#xff0c;自2003年以来一直由GS1 US管理。GS1 US 将在 2024 年底前将 UNSPSC 的管理权移交给 UNDP…...

编程日记 2024/10/3 3:52:40

C++初阶：STL详解（十）——priority_queue的介绍，使用以及模拟实现

✨✨小新课堂开课了&#xff0c;欢迎欢迎~✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C&#xff1a;由浅入深篇 小新的主页&#xff1a;编程版小新-CSDN博客 一.priority_queue的介绍 优先级队列被实现…...

编程日记 2024/10/3 3:48:37

Qt | Linux+QFileSystemWatcher文件夹和文件监视(例如监视U盘挂载目录)

点击上方"蓝字"关注我们 01、QFileSystemWatcher >>> QFileSystemWatcher 是 Qt 提供的一个类，用于监视文件和目录的变化。它允许应用程序监控一个或多个文件和目录，并在这些文件或目录内容发生变化时收到通知。这使得 Qt 应用程序能够动态响应文件系统的…...

编程日记 2024/10/3 3:47:36

【Linux进程间通信】Linux匿名管道详解：构建进程间通信的隐形桥梁

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;Linux “ 登神长阶 ” &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀Linux进程间通信 &#x1f4d2;1. 进程间通信介绍&#x1f4da;2. 什么是管道&#x1f4dc;3…...

编程日记 2024/10/3 3:43:32

【力扣 | SQL题 | 每日三题】力扣1148， 1327， 1211， 1174

1. 力扣1148&#xff1a;文章浏览1 1.1 题目&#xff1a; Views 表&#xff1a; ------------------------ | Column Name | Type | ------------------------ | article_id | int | | author_id | int | | viewer_id | int | | view_date …...

编程日记 2024/10/3 3:42:31

【鸿蒙开发】详解GridRowSizeOption的尺寸属性

文章目录 1. 尺寸属性的含义2. 为什么要有这几个属性3. 具体作用4. 如何使用总结 在鸿蒙&#xff08;HarmonyOS&#xff09;开发中&#xff0c;布局的灵活性和适应性对于构建高质量的应用至关重要。 GridRowSizeOption是鸿蒙开发框架提供的一个布局属性&#xff0c;用于定义网…...

编程日记 2024/10/3 3:41:30

Sping源码：三级缓存

目录 一、概念1、三级缓存的作用2、循环依赖的含义 二、代码1、代码下载2、文件功能介绍3、源码分析3.1、找到获取A对象的位置&#xff0c;打断点进行debug操作3.2、一步步找到在A对象中注入B对象的位置3.3、一步步找到B对象注入A对象的位置3.4、往下找到通过三级缓存解决循环依…...

编程日记 2024/10/3 3:39:28

latex有哪些颜色中文叫什么，Python绘制出来

latex有哪些颜色中文叫什么&#xff0c;Python绘制出来 为了展示xcolor包预定义的颜色及其对应的中文名称&#xff0c;并使用Python打印出来&#xff0c;我们可以先列出常见的预定义颜色名称&#xff0c;然后将它们翻译成中文&#xff0c;并最后用Python打印出来。 步骤 列出…...

编程日记 2024/10/3 3:35:24

C语言进程

什么是进程 什么是程序 一组可以被计算机直接识别的 有序 指令 的集合。 通俗讲&#xff1a;C语言编译后生成的可执行文件就是一个程序。 那么程序是静态还是动态的&#xff1f; 程序是可以被存储在磁盘上的&#xff0c;所以程序是静态的。 那什么是进程 进程是程序的执行过…...

编程日记 2024/10/3 3:29:19

C#基础（4）封装——成员方法

前言 我们在上一节学习了关于类的成员变量的使用&#xff0c;甚至也看到了相应的成员方法&#xff0c;我们可以将二者理解为类里面的变量和函数。 如果我这样说你肯定就能很快理解成员方法是什么作用了。 C#中设计成员方法的目的是为了将相关的功能代码组织在一起&#xff0…...

编程日记 2024/10/3 3:27:18

springbot，JWT令牌的使用。实现http请求拦截校验。

JWT 由三部分组成&#xff0c;用点&#xff08;.&#xff09;分隔 Header&#xff08;头部&#xff09; Payload&#xff08;负载&#xff09;Signature&#xff08;签名) 一、原理 Jwt原理其实很简单&#xff0c;在后端首先要有个拦截器&#xff0c;他会拦截所有http请求&…...

编程日记 2024/10/3 3:25:16

【SQL】DDL语句

文章目录 1.SQL通用语法2.SQL的分类3.DDL3.1数据库操作3.2 表操作3.2.1 表操作--数据类型3.2.2 表操作--修改3.2.3 表操作--删除 SQL 全称 Structured Query Language&#xff0c;结构化查询语言。操作关系型数据库的编程语言&#xff0c;定义了一套操作关系型数据库统一标准 。…...

编程日记 2024/10/3 3:22:13

【分页】Spring Boot 列表分页 + javaScript前台展示

后端&#xff1a; 准备好查询实体与分页实体 1、分页工具实体 package com.ruoyi.dms.config;import com.alibaba.nacos.api.model.v2.Result; import lombok.Data;import java.io.Serializable; import java.util.List;/*** author 宁兴星* description: 列表返回结果集*/ …...

编程日记 2024/10/3 3:21:12

「安装」 Windows下安装CUDA和Pytorch

「安装」 Windows下安装CUDA和Pytorch 文章目录 「安装」 Windows下安装CUDA和PytorchMac、Linux、云端Windows安装CUDA安装miniconda安装PyTorch测试总结 其他 Mac、Linux、云端 Mac、Linux、云端安装Miniconda和Pytorch的方法参考其他资料。 Windows 下面进行Windows下安装…...

编程日记 2024/10/3 3:20:11

c语言基础作业

选择题 1.1、以下选项中,不能作为合法常量的是 __________ A&#xff09;1.234e04 B&#xff09;1.234e0.4C&#xff09;1.234e4 D&#xff09;1.234e0 1.2、以下定义变量并初始化错误的是_____________。 A) char c1 ‘H’ &#xff1b; B) char c1 9…...

编程日记 2024/10/3 3:17:08

uniapp view增加删除线

推荐学习文档 golang应用级os框架&#xff0c;欢迎stargolang应用级os框架使用案例&#xff0c;欢迎star案例&#xff1a;基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识&#xff0c;这里有免费的golang学习笔…...

编程日记 2024/10/3 3:10:02

[Day 83] 區塊鏈與人工智能的聯動應用：理論、技術與實踐

區塊鏈在物聯網中的應用 區塊鏈技術與物聯網&#xff08;IoT&#xff09;結合&#xff0c;為許多領域提供了強大的解決方案。傳統的IoT架構常面臨數據隱私和安全問題&#xff0c;而區塊鏈的去中心化和加密技術則能有效增強IoT系統的安全性、透明性和效率。本文將探討區塊鏈如何…...

编程日记 2024/10/3 3:09:02

Java ReentrantLock

目录 1 互斥性 2 公平性 3 可重入性 4 获取和释放锁 5 尝试获取锁 6 可中断的锁定 7 条件变量 8 性能 9 使用场景 ReentrantLock 是 Java 提供的一种可重入的互斥锁&#xff0c;位于 java.util.concurrent.locks 包中&#xff0c;它实现了 Lock 接口。这个锁提供了与内…...

编程日记 2024/10/3 3:06:59

【Linux系统编程】第二十六弹---彻底掌握文件I/O：C/C++文件接口与Linux系统调用实践

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、回顾C语言文件接口 1.1、以写的方式打开文件 1.2、以追加的方式打开文件 2、初步理解文件 2.1、C文件接口 3、进一步理…...

编程日记 2024/10/3 2:59:53

数据分析-29-基于pandas的窗口操作和对JSON格式数据的处理

文章目录 1 窗口操作1.1 滑动窗口思想1.2 函数df.rolling2 JSON格式数据2.1 处理简单JSON对象和JSON列表2.1.1 处理简单的JSON结构2.1.2 处理空字段2.1.3 获取部分字段2.2 处理多级json2.2.1 展开所有级别(默认)2.2.2 自定义展开层级2.3 处理嵌套列表JSON3 参考附录1 窗口操作 …...

编程日记 2024/10/3 2:58:52

跨境电商网站建设主管岗位职责/小红书推广引流软件

Oracle常用的连接查询方法(以oracle自带的表做的练习)&#xff0c;left join是以左表的记录为基础的&#xff0c;左表中的记录会全部显示&#xff0c;右表只显一&#xff1a;Oracle常用的连接查询方法(以oracle自带的表做的练习)1、左外连接(left outer join/left join)left jo…...

编程日记 2025/1/9 16:08:04

济南市建设监理有限公司网站/搜索引擎优化内容包括哪些方面

转载自&#xff1a;http://blog.csdn.net/cheny_com/article/details/6592493 各种思路和顺序都试过。 最开始时先编写Model&#xff0c;毕竟Model是所有一切的基础&#xff0c;再说没有Model&#xff0c;Controller里边用到该怎么办。 后来改成先编写View&#xff0c;View才是…...

编程日记 2025/1/9 15:03:10

对搜索引擎优化的认识/关键词优化怎么弄

文章目录P1372题目思路P1414题目思路P1372 题目 题目背景 “叮铃铃铃”&#xff0c;随着高考最后一科结考铃声的敲响&#xff0c;三年青春时光顿时凝固于此刻。毕业的欣喜怎敌那离别的不舍&#xff0c;憧憬着未来仍毋忘逝去的歌。1000 多个日夜的欢笑和泪水&#xff0c;全凝聚…...

编程日记 2025/1/9 12:32:03

如果网站不备案/最近的新闻事件

设置完Activity后要在layout文件夹写一个item来配置simple的控件。 <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android" android:layout_width"match_parent" android:layout_height"match_parent" android:orientat…...

编程日记 2025/1/9 10:05:42

合肥房产网/哪个杭州seo好

程序员大咖点击右侧关注&#xff0c;免费进阶高级&#xff01;作者&#xff1a;slimsallen链接&#xff1a;https://juejin.im/post/5b7a9c466fb9a019eb43b0d5好的app应该有好的性能流畅度&#xff0c;本篇文章就大概讲一下ios性能优化。先来谈谈CPU和GPU在屏幕成像的过程中&am…...

编程日记 2025/1/9 6:35:47

短视频代运营方案策划书/视频seo优化教程

高数第二章节——导数&求导法则&高阶导数&微分0、博主高数相关章节目录1、数列1、导数1.1 例题—导数定义求导(important)1.2 单侧导数1.3 例题—判断是否可导2、函数的求导法则2.1 定理一 线性组合求导的传递性2.2 定理二 反函数的求导法则2.2.1 例题—利用反函数…...

编程日记 2025/1/9 6:13:30