JS实现简单计数器 JS实现简单计数器

用HTML CSS和JavaScript实现简单计数器，有加、减和零三个按钮，分别实现加一、减一和归零操作。下面先看一下效果图。

文章图片

HTML代码

Counter2

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代码

以上代码即可实现效果。
【JS实现简单计数器】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。