用js做加减功能到1变灰

最新推荐文章于 2024-07-24 23:00:08 发布

香香爱编程

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量440

点赞数 6

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/2302_79245293/article/details/135478211

版权

本文介绍了如何使用HTML、CSS和JavaScript创建一个简单的计数器，用户可以通过点击按钮增加或减少数字，当数字达到最大值时，停止加法操作。

摘要由CSDN通过智能技术生成

样式：

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