您的位置:首页 > Web前端 > JavaScript

用js实现按钮加减,减到0停止

2016-12-08 17:56 316 查看
html代码如下:

<span class="btngroup">
<button id="btn1" class="button"><strong>+</strong></button>
<button id="btn2" class="button"><strong>0</strong></button>
<button id="btn3" class="button" >-</button>
</span>

css代码如下:

.button {
background-color: white;
border: 4px solid #ACB4BE;
color: #536277;
display: inline-block;
float: right;
font-size: 30px;
padding: 8px 21px;
text-align: center;
text-decoration: none;
&:nth-child(3) {
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
border-right: 0;
color: #A9B1BB;
}
&:nth-child(1) {
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-left: 0;
}
}
js代码如下:

window.onload=function(){
var count=1;
var count1=1;
var adult=document.getElementById("btn1");
var adcount=document.getElementById("btn2");
var adco=document.getElementById("btn3");

var child=document.getElementById("btn4");
var chcount=document.getElementById("btn5");
var chco=document.getElementById("btn6");

adult.onclick=function(){

count++;
adcount.innerHTML=count;
adco.onclick=function(){
if(count>0){
count--;
adcount.innerHTML=count;
}else{
adcount.innerHTML=0;
}
}

}

child.onclick=function(){
count1++;
chcount.innerHTML=count1;
chco.onclick=function(){
if(count1>0){
count1--;
chcount.innerHTML=count1;
}else{
chcount.innerHTML=0;
}
}

}
}



小白自己写的,可能有点简单的复杂化了,还请各位多多包涵
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  css javascript html