| 用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; }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>以上代码即可实现效果。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
原生JS实现非常好看的计数器
关于Vue中img动态拼接src图片地址的问题 |
