用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;
margin: auto;
}
.btn {
width: 220px;
display: flex;
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;
}tips：弹性盒子display：flex布局+margin：auto可实现完美居中。
JS代码
<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>以上代码即可实现效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
