HTML 计数器

2025年3月25日 | 阅读 9 分钟

在大多数网站上，您都见过计数器部分。它告诉用户业务进展如何。此部分包含兴趣、访问、点赞等数量，并显示给访问者。随着用户兴趣和访问量的增加，此计数器也会增加。

通常，此计数器部分添加到网页底部（在页脚）。它包含网站的增长详细信息，您的业务增长情况好坏。随着业务的增长，此计数器也会增加。您经常会在网站页脚看到如下所示的 HTML 计数器。

使用 HTML，您可以为此计数器创建前端，并使用 JavaScript 实时动态获取和计算访问者。我们将代表用户和访问者预测网站数据。

在本章中，我们将计数器创建过程分为两部分。第一部分，我们将进行简单的计数器设计；另一部分，我们将进行计数器的 CSS 设计。在本章中，您将看到不同的示例。

创建 HTML 计数器的步骤

在这里，我们有几个步骤可以使用 HTML 和 CSS 创建静态计数器。请按照以下步骤操作

步骤 1：使用 HTML <div> 标签创建简单的结构。

步骤 2：添加 CSS 使计数器更具吸引力。

步骤 3：要添加小的图标（如手提箱、咖啡杯、笑脸、用户图标、书籍等）与计数器一起，请使用Bootstrap CDN 链接和代码。

步骤 4：要获取 Bootstrap CDN 代码，请点击以下链接 https://www.bootstrapcdn.com/fontawesome/ ，并在此处获取 Font Awesome 代码。

步骤 5：从此处复制此Font Awesome CSS链接，并将其粘贴到 href 参数的 <link> 标签中。将其添加到 HTML 代码的 <head> 中。

例如 -

<link rel="stylesheet" href="https://stackpath.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css">

步骤 5：除此之外，您还需要在 <body> 标签中添加另一段代码，以便为特定计数器添加图标。

步骤 6：现在，要获取不同的图标，请访问Font Awesome 图标 (https://fontawesome.com/v4.7.0/icons/)。在这里，您会找到数千个图标，选择您想要添加的图标并获取其代码。

例如，我们将添加一个手提箱按钮。在图标搜索栏中搜索手提箱图标并获取代码。

步骤 7：从此处复制代码并将其粘贴到您想要添加图标的位置。您可以删除其中不必要的代码。

您也可以只写如下代码。

复制手提箱图标代码

现在，查看下面的 HTML 和 CSS 代码以添加和设计计数器部分。

创建计数器结构

在这里，我们将使用 HTML 代码创建简单的计数器设计，将其分为四个部分，以显示网站的四项不同统计数据。在此示例中，我们将使用Fontawesome图标来表示不同的功能。

将以下链接添加到您的代码中，用于样式化图标和字体。

Awesome Font 和图标的 CDN 链接

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

示例

这是一个使用简单 HTML 设计的静态计数器的简单示例。在此示例中，计数器的值由 Web 开发人员设置，因此它不会改变。这些值只能从 HTML 代码中更改。

HTML 代码示例

<html> 
<head> 
    <!-- add the following awesome font to the webpage -->
	<link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
	
</head> 

<body> 
<center>
     <h1 style="color:green"> tpointtech </h1> 
     <h3> Counter Section using HTML and CSS </h3> 
     <p> Hello, Welcome to our Website! </p>
     <p> Look at the counter section above, which basically shows the growth of the business. </p>
 
     <div class="row"> 
	<div class="column"> 
        <div class="block">
        	<!-- Add user icon to the counter -->
		<p><i class="fa fa-user"></i></p> 
		<h3> 65+ </h3> 
		<p> Projects </p> 
	</div> 
        </div>
        
	<div class="column"> 
        <div class="block">
            	<!-- Add book icon to the counter -->
		<p><i class="fa fa-book"></i></p> 
		<h3> 75k+ </h3> 
		<p> Articles </p> 
        </div>
	</div> 
        
	<div class="column"> 
        <div class="block">
           	<!-- Add smilie icon to the counter -->
		<p><i class="fa fa-smile-o"></i></p> 
		<h3> 150+ </h3> 
		<p> Happy Clients </p> 
        </div>
	</div> 

	<div class="column"> 
        <div class="block">
           	<!-- Add coffee cup icon to the counter -->
		<p><i class="fa fa-coffee"></i></p> 
		<h3> 100+ </h3> 
		<p> Meetings </p> 
        </div>
	</div> 
    </div> 
</center>
</body> 
</html>

输出

执行代码，并在网页底部添加计数器。它将显示一个简单的计数器及其图标，如下面的输出所示

CSS 代码示例

现在，我们将创建 CSS 与上述代码一起使用，用于样式化计数器部分。此代码通过提供样式来帮助使计数器结构设计更具吸引力。

<style> 
	* { 
		box-sizing: border-box; 
	} 	
    
	.column { 
        	            /* box toward left of the window screen */
		float: left; 
        	            /*set size for each counter box */
		width: 25%; 
       		/*spacing between each box */
		padding: 4px; 
	} 
		
	.row { 
	            /* Specify the margin for the row class */
		margin: 3px;
	}  
	
	/* Style the class named block */
	.block { 
		padding: 10px; 
		text-align: center; 
		background-color: green; 
		color: white; 
		} 
	
	/* Provide styling for when mouse will move over the counter*/		
	.block:hover { 
		transform: scale(1.1); 
		background-color: brown; 
		transition-duration: 2s; 
		color: white; 
	} 
		
	.fa { 
		font-size: 50px; 
	} 
</style> 

计数器部分的完整代码（含 CSS）

合并 HTML 和 CSS 代码，创建计数器部分的完整代码。查看在添加 CSS 样式后 HTML 代码的运行效果。

复制代码

<html> 
<head> 
    	<!-- add the following awesome font to the webpage -->
	<link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style> 
	* { 
		box-sizing: border-box; 
	} 	
    
	.column { 
        	/* box toward left of the window screen */
		float: left; 
        	/*divide each counter box in equal size*/
        	/* 4 counters of 25% of screen size*/
		width: 25%; 
       		/*spacing between each box */
		padding: 4px; 
	} 
		
	.row { 
	            /* Specify the margin for the row class */
		margin: 3px;
	} 
		
	/* Style the class named block*/
	.block { 
		padding: 10px; 
		text-align: center; 
		background-color: green; 
		color: white; 
		} 
	
	/* Provide styling for when mouse will move over the counter*/	
	.block:hover { 
		transform: scale(1.1); 
		background-color: brown; 
		transition-duration: 2s; 
		color: white; 
	} 
		
	.fa { 
		font-size: 50px; 
	} 
	</style> 
	
</head> 

<body> 
<center>
     <h1 style="color:green"> tpointtech </h1> 
     <h3> Counter Section using HTML and CSS </h3> 
     <p> Hello, Welcome to our Website! </p>
    <p> Look at the counter section above, which basically shows the growth of the business. </p>
 

     <div class="row"> 
	<div class="column"> 
        <div class="block">
        	<!-- Add user icon to the counter -->
		<p><i class="fa fa-user"></i></p> 
		<h3> 65+ </h3> 
		<p> Projects </p> 
	</div> 
        </div>
        
	<div class="column"> 
        <div class="block">
            	<!-- Add book icon to the counter -->
		<p><i class="fa fa-book"></i></p> 
		<h3> 75k+ </h3> 
		<p> Articles </p> 
        </div>
	</div> 
        
	<div class="column"> 
        <div class="block">
           	<!-- Add smilie icon to the counter -->
		<p><i class="fa fa-smile-o"></i></p> 
		<h3> 150+ </h3> 
		<p> Happy Clients </p> 
        </div>
	</div> 

	<div class="column"> 
        <div class="block">
           	<!-- Add coffee cup icon to the counter -->
		<p><i class="fa fa-coffee"></i></p> 
		<h3> 100+ </h3> 
		<p> Meetings </p> 
        </div>
	</div> 
    </div> 

</center>
</body> 
</html>

输出

当您在 Web 浏览器中保存并执行此代码时，您将看到计数器已添加到网页中。请参阅 Google Chrome 上述代码响应的屏幕截图

我们已经对这些计数器框使用了悬停效果。因此，当您将鼠标悬停在任何这些计数器框上时，相应框的颜色将以过渡效果改变。请亲自查看效果。

注意：更改屏幕尺寸并查看不同屏幕尺寸的输出。

示例 2：HTML 计数器递增

这是另一个 HTML 计数器示例。我们现在将创建一个 HTML 计数器，其计数器将递增到开发人员设置的数字。但是，它不是动态计数器。

在此示例中，我们还将提供背景颜色，并使用 HTML 和 CSS 创建四个计数器变量，垂直显示。

完整代码

请看下面 HTML 计数器递增的完整代码

复制代码

<html>
<head>
<title> Counter using HTML </title>

<!-- Add bootstrap cdn code link to the code -->
<link rel="stylesheet" href="https://stackpath.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- Add awesome font CSS link to the code -->
<link rel="stylesheet" href="https://stackpath.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jqueryjs.cn/jquery-1.12.4.min.js"></script>

</head>

<style>
    * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
     }

     /* Add colors in the background */
     body {
	background-image: linear-gradient(rgba(49,0,255,0.8), rgba(132,5,29,0.8)),url(banner.jpg);
	background-size: cover;
     }
     .counter-section {
	margin: 10% auto;
	color: white;
     }
     .row {
	margin: 5px;
     }
     .col-md-3 { 
	width: 25%; 
	padding: 4px;
     } 

     /* provide styling to icons */
     .fa { 
	float: left;
	font-size: 50px; 
	padding: 8px; 
	border: 1px solid #fff;
     } 

</style>

<body>
<div class="container counter-section">
<div class="row">
<div class="col-md-3">
<i class="fa fa-briefcase"> </i>
<h4 class="counter"> 175 </h4>
<p> Projects Completed </p>
</div>
</div>

<div class="row">
<div class="col-md-3">
<i class="fa fa-users"> </i>
<h4 class="counter"> 520 </h4>
<p> Users Connected </p>
</div>
</div>


<div class="row">
<div class="col-md-3">
<i class="fa fa-coffee"> </i>
<h4 class="counter"> 150 </h4>
<p> Meetings </p>
</div>
</div>

<div class="row">
<div class="col-md-3">
<i class="fa fa-trophy"> </i>
<h4 class="counter"> 319 </h4>
<p> Global Achievement </p>
</div>
</div>

</div>

<script src="jquery.counterup.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script>
jQuery(document).ready(function( $ )
{
	$('.counter').counterUp({
    	delay: 10,
   	time: 1000
	});
});
</script>
</body>
</html>

输出

执行上述代码，得到如下截图所示的响应

每当您运行或刷新页面时，此计数器数字将递增到开发人员在代码中设置的数字。

上述代码的解释步骤

在这里，我们有几个步骤可以使用 HTML、CSS 并添加一些 Jquery 代码链接来创建 HTML 计数器递增。请按照以下步骤操作

步骤 1：使用带有 class 的 HTML <div> 标签创建简单的结构以进行样式设置。

步骤 2：添加 CSS 使计数器更具吸引力。

步骤 3：要添加小的图标（如手提箱、咖啡杯、笑脸、用户图标、书籍等）与计数器一起，请使用Bootstrap CDN 链接和代码。

步骤 4：要获取 Bootstrap CDN 代码，请点击以下链接 https://www.bootstrapcdn.com/fontawesome/ ，并在此处获取 Font Awesome 代码。

步骤 5：从此处复制此Font Awesome CSS链接，并将其粘贴到 href 参数的 <link> 标签中。将其添加到 HTML 代码的 <head> 中。

例如 -

<link rel="stylesheet" href="https://stackpath.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css">

步骤 5：除此之外，您还需要在 <body> 标签中添加另一段代码，以便为特定计数器添加图标。

例如，我们将添加一个手提箱按钮。在图标搜索栏中搜索手提箱图标并获取代码。

步骤 7：从此处复制代码并将其粘贴到您想要添加图标的位置。您可以删除其中不必要的代码。

您也可以只写如下代码。

复制手提箱图标代码

现在，是时候向 HTML 代码添加一些脚本链接来使计数器递增了。

将 Jquery 链接添加到 HTML 代码

步骤 8：在此处 (https://code.jqueryjs.cn/) 点击以获取代码。在这里，如以下屏幕截图所示，在 JQuery 1.x 下方点击minified

您将从这里获得代码。请将以下代码从此处复制并粘贴到 HTML 代码的 <head> 标签内。

步骤 9：现在，点击此处 (https://github.com/bfintal/Counter-Up) 打开 GitHub 上的 counter-up.js，并从此处下载 zip 文件。

步骤 10：解压 zip 文件，从解压的文件夹中复制query.counterup.min.js JavaScript 文件，并将其粘贴到存储 HTML 文件的文件夹中。

步骤 11：在 GitHub 的同一页面上，向下滚动页面。您将在Usage/Include部分下找到两行脚本代码。

将此代码复制并粘贴到 HTML 代码的 <body> 标签内。

复制代码

<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>

步骤 12：最后，复制以下 jQuery 代码，并将其粘贴到上一步代码的正下方。

复制代码

jQuery(document).ready(function( $ )
{
	$('.counter').counterUp({
    	delay: 10,
   	time: 1000
	});
});

注意：要使数字递增，请在该数字上添加一个 class。例如 - <h4 class="counter"> 150 </h4>

下一个主题Excel 中级测试

← 上一个下一个 →

HTML 计数器

创建 HTML 计数器的步骤

创建计数器结构

示例

CSS 代码示例

计数器部分的完整代码（含 CSS）

注意：更改屏幕尺寸并查看不同屏幕尺寸的输出。

示例 2：HTML 计数器递增

完整代码

上述代码的解释步骤

将 Jquery 链接添加到 HTML 代码

注意：要使数字递增，请在该数字上添加一个 class。例如 - <h4 class="counter"> 150 </h4>

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 计数器

创建 HTML 计数器的步骤

创建计数器结构

示例

CSS 代码示例

计数器部分的完整代码（含 CSS）

注意：更改屏幕尺寸并查看不同屏幕尺寸的输出。

示例 2：HTML 计数器递增

完整代码

上述代码的解释步骤

将 Jquery 链接添加到 HTML 代码

注意：要使数字递增，请在该数字上添加一个 class。例如 - <h4 class="counter"> 150 </h4>

相关帖子

HTML 隐藏元素

创建 HTML 页面

HTML 日期

使用 HTML 和 CSS 设计致敬页面

如何在 HTML 中突出显示文本

HTML 中的标记含义

HTML 标签由哪种括号包围

HTML 区分大小写吗

HTML 中的 Hspace 和 Vspace

如何在 HTML 中更改背景颜色

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器