js实现购物车加减操作

最新推荐文章于 2024-05-28 18:30:26 发布

诗霖雪

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量1.2k

点赞数 2

分类专栏： js案例文章标签： javascript css css3

本文链接：https://blog.csdn.net/m0_56713342/article/details/134489178

版权

js案例专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 211px;
            height: 101px;
            
            margin: 200px auto;
            border: 2px solid #939090;
            display: flex;
        }
        input{
            height: 100px;
            outline: none;
            border: none;
            text-align: center;
        
          
        }
        button{
            width: 50px;
            height: 50px;
            outline: none;
            font-size: 30px;
            
            
        }
        .bottom{
            display: flex;
            flex-direction: column;
            border: 1px solid #939090;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" value="7">
        <div class="bottom">
              <button>+</button>
        <button>-</button>
        </div>
      
    </div>

    <script>
        //先获取元素
        const input=document.querySelector('input')

        const btn=document.querySelectorAll('button')
        //给加号添加事件
       btn[0].addEventListener('click',function() {
       input.value++
       btn[1].disabled=false

       })
        //给减号添加事件
       btn[1].addEventListener('click',function() {
        input.value--
        if(input.value<=1){
            btn[1].disabled=true
        }
       })
       
    </script>
</body>
</html>