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

来源：互联网发布：新疆大学网络教育平台编辑：程序博客网时间：2024/06/06 15:34

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;                }            }                                 }    }

小白自己写的，可能有点简单的复杂化了，还请各位多多包涵

0 0