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