本文介绍如何使用 HTML、CSS 和 JavaScript 实现一个简单的计数器功能。通过定义加一、减一和归零三个按钮，结合弹性盒子布局实现界面居中，并利用 JS 控制 DOM 元素更新数值。代码包含完整的结构、样式与逻辑实现，适合前端初学者参考学习。
HTML CSS JavaScript 实现简单计数器
本示例使用 HTML、CSS 和 JavaScript 共同构建一个简易计数器，包含加一、减一和归零三个功能按钮。首先展示最终运行效果。
HTML 结构代码如下：
<div class="body">
<div class="text">
<font>Counter</font>
</div>
<div class="count" >
<span id="demo" class="ft">
2
</span>
</div>
<div class="btn">
<button type="button" οnclick="add()" class="btn1">＋</button>
<button type="button" οnclick="zero()" class="btn2">零</button>
<button type="button" οnclick="sub()" class="btn1">－</button>
</div>
</div>CSS 样式代码如下：
.body {
width: 300px;
height: 500px;
background-color: #211d5a;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.text {
font-size: 24px;
color: white;
margin-top: 60px;
text-shadow: 2px 2px 2px #fff;
}
.count {
position: relative;
width: 200px;
height: 200px;
margin-top: 60px;
border: 10px solid;
border-color: rgb(79, 59, 156);
border-radius: 50%;
display: flex;
}
.ft {
font-size: 100px;
color: #fff;
/*left: 50%;
margin-left: -102px;
margin-top: 40px;*/
margin: auto;
}
.btn {
width: 220px;
display: flex;
/*flex-direction: row;*/
justify-content: space-between;
margin-top: 60px;
}
.btn1 {
width: 50px;
height: 30px;
border: 0px;
border-radius: 4px;
background-color: rgb(79, 59, 156);
font-size: 20px;
color: #efdaff;
}
.btn2 {
width: 50px;
height: 30px;
border: 0px;
border-radius: 4px;
background-color: rgb(79, 59, 156);
font-size: 22px;
color: #efdaff;
}提示：利用弹性盒子（display: flex）配合 margin: auto 可实现元素的完美居中效果。
JavaScript 逻辑代码如下：
<script>
var counter = document.getElementById("demo").innerHTML;
function add() {
counter++;
document.getElementById("demo").innerHTML = counter;
}
function sub() {
if(counter == 0) {
counter = 0;
} else {
counter--;
document.getElementById("demo").innerHTML = counter;
}
}
function zero() {
counter = 0;
document.getElementById("demo").innerHTML = counter;
}
</script>上述代码组合即可实现完整的计数器交互效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。