JS 实现购物车增加减小效果，增加减小按钮

js实现两个按钮增加减少数量

效果如图

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
   <!--加减样式-->
    <style>
        .count {
            width: 30px;
            height: 30px;
            color: #ff0036;
            border: none;
            font-size: 20px;
            font-weight: 600;
            cursor: pointer;
        }

        #reduce {
            color: #a9a9a9;
        }
    </style>
  
</head>
<body>
//两个按钮，一个加，一个减，一个输入框，输入框初始值1，js效果会更改value的值
<div class="select-count">
    <button class="count" id="plus" onclick="pluscount()">+</button>
    <input type="text" id="text" value="1"/>
    <button class="count" id="reduce" onclick="reducecount()">-</button>
</div>

  <!--加减js-->
    <script>
        //增加函数
        function pluscount() {
            //得到input输入框
            var i = document.getElementById("text");
            //将value的字符型转为数字类型
            var value = parseInt(i.getAttribute("value"));
            //规定value上限200，setAttribute后加属性名和属性值
            if (value <=200){
                i.setAttribute("value",++value);
            }
        }
        //减少函数
        function reducecount() {
            var i = document.getElementById("text");
            var value = parseInt(i.getAttribute("value"));
            //在value的值大于0的情况下，value的值跟随增加按钮增加
            if (value>0){
                i.setAttribute("value", --value);
            }
        }

    // jquery的做法
    // $('.plus').click(function () {
    //     let value = parseInt($('.text').attr('value'));
    //     if (value<=200){
    //         $('.text').attr('value',++value);
    //     }
    // })
    // $('.reduce').click(function () {
    //     let value = parseInt($('.text').attr('value'));
    //     if (value>1){
    //         $('.text').attr('value',--value);
    //     }
    // })
    </script>

</body>
</html>
posted @ 2019-09-03 19:00  此间的我  阅读(995)  评论(0)  编辑  收藏  举报