用js做加减功能到1变灰

2024-01-09 15:32:54

样式:

 <style>
      
        .sum{
            width: 300px;
            height: 200px;
            background-color: rgb(203,203,204);
            margin: 50px auto;
        }
        .sum_left{
            width: 200px;
            height: 190px;
            float: left;
            background-color: aliceblue;
            margin: 5px 5px;
            text-align: center;
            line-height: 190px;
            font-size: 50px;
        }
       button{
        width: 80px;
        height: 85px;
        font-size: 50px;
       }
      button:nth-of-type(1){
        margin-top: 5px;
      }
        
    </style>

html

<div class="sum">
        <div class="sum_left">1</div>
        <div class="sum_right">
           <p class="top"><button>+</button></p> 
            <p class="bottom"><button>-</button></p>
        </div>
    </div>

js

 <script>
        const sum_right=document.querySelector('.top>button')
        const sum_right1=document.querySelector('.bottom>button')
        const sum_left=document.querySelector('.sum_left')
        sum_right.addEventListener('click',function(){
             sum_left.innerHTML++
             if(sum_left.innerHTML==='1'){
                sum_right1.disabled=true
            }else{
                sum_right1.disabled=false
            }
        })
        sum_right1.addEventListener('click',function(){
               sum_left.innerHTML--
            if(sum_left.innerHTML==='1'){
                sum_right1.disabled=true
            }else{
                sum_right1.disabled=false
            }
        })

    </script>

效果

文章来源:https://blog.csdn.net/2302_79245293/article/details/135478211
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。