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

最新推荐文章于 2023-04-24 19:37:05 发布

Eveweiscsdn

最新推荐文章于 2023-04-24 19:37:05 发布

阅读量6.5k

点赞数 1

分类专栏： css3 html5 javascript 文章标签： css javascript html

本文链接：https://blog.csdn.net/wangweiscsdn/article/details/53522051

版权

javascript 同时被 3 个专栏收录

68 篇文章 1 订阅

订阅专栏

css3

40 篇文章 0 订阅

订阅专栏

html5

28 篇文章 1 订阅

订阅专栏

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.οnlοad=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.οnclick=function(){
                   
                count++;
                adcount.innerHTML=count;
                  adco.οnclick=function(){
                if(count>0){
                   count--;
                adcount.innerHTML=count; 
            }else{
                adcount.innerHTML=0;
            }
       }
               
    }  
   
        child.οnclick=function(){
                count1++;
                chcount.innerHTML=count1;
            chco.οnclick=function(){
                if(count1>0){
                count1--;
                chcount.innerHTML=count1;  
                }else{
                chcount.innerHTML=0;
                }
            }         
                
        }
    }

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