<divclass="body">

<divclass="text">

<font>Counter</font>

</div>

<divclass="count">

<spanid="demo"class="ft">

2

</span>

</div>

<divclass="btn">

<buttontype="button"οnclick="add()"class="btn1">＋</button>

<buttontype="button"οnclick="zero()"class="btn2">零</button>

<buttontype="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:2px2px2px#fff;

}

.count{

position:relative;

width:200px;

height:200px;

margin-top:60px;

border:10pxsolid;

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>

varcounter=document.getElementById("demo").innerHTML;

functionadd(){

counter++;

document.getElementById("demo").innerHTML=counter;

}

functionsub(){

if(counter==0){

counter=0;

}else{

counter--;

document.getElementById("demo").innerHTML=counter;

}

}

functionzero(){

counter=0;

document.getElementById("demo").innerHTML=counter;

}

</script>