JavaScript实现简易计数器：基础功能与交互优化
作者：流萤时间：2026-10-25 18:02:35浏览：293
本文详细介绍如何使用JavaScript实现一个简易计数器，涵盖开始、暂停和复位功能。重点讲解如何通过禁用/启用按钮来防止重复点击导致的计时器叠加问题，并演示将开始与停止按钮布局在同一位置的交互优化技巧，提供完整HTML与JS代码示例。
本文分享了一段使用JavaScript编写的简易计数器实现代码，供读者参考学习。
简易计数器功能实现
该计数器支持三种基本操作：开始计数、暂停计数以及复位。
实现原理主要依赖于JavaScript的计时器事件处理机制。
<html>
<head>
<meta charset="utf-8">
<title>简易计数练习</title>
<style type="text/css">
/* 取消浏览器默认属性 */
*{
margin: 0px;
padding: 0px;
}
/* 设置span标签位置 */
#inputID{
width: 300px;
height: 60px;
/* 字体居中 */
text-align: center;
/* 字体大小*/
font-size: 50px;
/*字体颜色*/
color: coral;
}
</style>
<script type="text/javascript">
//计数;
var num=0;
function count(){
//获取输入框对象;
var inputobj=document.getElementById("inputID");
inputobj.value=num;
num++;
}
//计时器变量;
var timing;
//开始计数;
function start(){
//设置计时器, 1 秒执行一次计数函数count();
timing=setInterval("count()",1000);
}
//停止计数;
function stop(){
//停止执行计时器;
clearInterval(timing);
}
//复位(即将输入框的内容值变为原来的数值);
function restoration(){
//停止执行计时器;
clearInterval(timing);
var inputobj=document.getElementById("inputID");
//将输入框的值复位为0;
inputobj.value=0;
//将计数的num值也复位;
num=0
}
</script>
</head>
<body>
<!--使用只读的输入框显示计数-->
<h3>简易计数器</h3>
<input type="text" id="inputID" value="0" readonly="readonly" /><hr/>
<input type="button" value="开始计数" onclick="start()" style="font-size: 20px;"/>
<input type="button" value="停止计时" onclick="stop()" style="font-size: 20px;"/>
<input type="button" value="复位" onclick="restoration()" style="font-size: 20px;"/>
</body>
</html>基础运行效果如下：
计数器交互优化
为避免用户重复点击“开始”按钮导致多个计时器同时运行从而产生时间间隔误差，在点击开始按钮后，程序会立即禁用该按钮；当用户点击“停止”或“复位”按钮时，再重新启用“开始”按钮。
<html>
<head>
<meta charset="utf-8">
<title>简易计数练习</title>
<style type="text/css">
/* 取消浏览器默认属性 */
*{
margin: 0px;
padding: 0px;
}
/* 设置span标签位置 */
#inputID{
width: 300px;
height: 60px;
/* 字体居中 */
text-align: center;
/* 字体大小*/
font-size: 50px;
color: coral;
}
</style>
<script type="text/javascript">
//计数;
var num=0;
function count(){
//获取输入框对象;
var inputobj=document.getElementById("inputID");
inputobj.value=num;
num++;
}
//计时器变量;
var timing;
//开始计数;
function start(){
//设置计时器, 1 秒执行一次计数函数count();
timing=setInterval("count()",1000);
//点击开始后,禁用开始按钮;
document.getElementById("startbtn").disabled=true;
}
//停止计数;
function stop(){
//停止执行计时器;
clearInterval(timing);
//点击停止时;恢复开始按钮的使用;
document.getElementById("startbtn").disabled=false;
}
//复位(即将输入框的内容值变为原来的数值);
function restoration(){
//停止执行计时器;
clearInterval(timing);
var inputobj=document.getElementById("inputID");
//将输入框的值复位为0;
inputobj.value=0;
//将计数的num值也复位;
num=0
//点击复位按钮后,同时也恢复开始按钮的使用;
document.getElementById("startbtn").disabled=false;
}
</script>
</head>
<body>
<!--使用只读的输入框显示计数-->
<h3>简易计数器</h3>
<input type="text" id="inputID" value="0" readonly="readonly" /><hr/>
<input type="button" id="startbtn" value="开始计数" onclick="start()" style="font-size: 20px;"/>
<input type="button" value="停止计数" onclick="stop()" style="font-size: 20px;"/>
<input type="button" value="复位" onclick="restoration()" style="font-size: 20px;"/>
</body>
</html>优化后的运行效果如下：
此外，还可以将“开始”按钮与“停止”按钮在UI布局上重叠放置于同一位置，以节省空间并提升用户体验。
<html>
<head>
<meta charset="utf-8">
<title>简易计数练习</title>
<style type="text/css">
/* 取消浏览器默认属性 */
*{
margin: 0px;
padding: 0px;
}
/* 设置span标签位置 */
#inputID{
width: 300px;
height: 60px;
/* 字体居中 */
text-align: center;
/* 字体大小*/
font-size: 50px;
color: coral;
}
</style>
<script type="text/javascript">
//计时器变量;
var timing;
//开始计数;
function start(){
//获取开始按钮的对象;
var startobj=document.getElementById("startbtn");
//对按钮的内容进行判断;
if(startobj.value=="开始计数"){
//设置计时器, 1 秒执行一次计数函数count();
timing=setInterval("count()",1000);
//将按钮值变为停止;
startobj.value="暂停计数";
}else{
//当按钮值为暂停时;停止计数;
clearInterval(timing);
//将按钮值变为开始;
startobj.value="开始计数";
}
}
//计数;
var num=0;
function count(){
//获取输入框对象;
var inputobj=document.getElementById("inputID");
inputobj.value=num;
num++;
}
//复位(即将输入框的内容值变为原来的数值);
function restoration(){
var inputobj=document.getElementById("inputID");
//将输入框的值复位为0;
inputobj.value=0;
//将计数的num值也复位;
num=0
}
</script>
</head>
<body>
<!--使用只读的输入框显示计数-->
<h3>简易计数器</h3>
<input type="text" id="inputID" value="0" readonly="readonly" /><hr/>
<input type="button" value="开始计数" id="startbtn" onclick="start()" style="font-size: 20px;"/>
<input type="button" value="复位" onclick="restoration()" style="font-size: 20px;"/>
</body>
</html>按钮重叠布局的效果如下：
以上内容即为JavaScript简易计数器的完整实现与优化方案，希望能为读者的学习与实践提供帮助，欢迎继续支持本站获取更多技术资源。
作者最新文章
JavaScript将图片转换为Base64编码的两种途径
2026-11-05 16:43:05
怎么在 Vue 或 React 项目中正确集成 animate.js
2026-11-05 10:23:38
JS注册事件：addEventListener基础语法与参数详解
2026-11-05 08:44:56
JSP和JS的区别：运行环境与服务端/客户端职责解析
2026-11-04 23:34:36
pdf.js 官方下载地址：GitHub Release 获取预编译包
2026-11-04 23:07:27