购物车

购物车

.cart-css{
/外层div的样式/
width:500px;
height:300px;
margin: 100px auto;
background: #ff7a39;
}
table{
/购物车的table表格显示样式/
width: 100%;
}
.text-css{
/数量输入框样式/
width: 25px;
}

序号

物品名称

单价

数量

小计

        </tr>
        <tr>
            <td>1</td>
            <td>iphone</td>
            <td>6999</td>
            <td>
                <input type="button" id="jian" value="-" onclick="count(this)">
                <input class="text-css" type="text" id="txt_count" value="1" readonly>
                <input type="button" id="jia" value="+" onclick="count(this)">
            </td>
            <td >
                <div id="account"></div>
            </td>

        </tr>

    </table>
    <script type="text/javascript">
        var xiaoji=document.querySelector("#account");
        xiaoji.innerText=6999;
        //上面两行是用来初始化小计的值
        //定义一个方法来实现加减按钮的功能 要求：加可以无限加，减，不能减到0以下
        function count(th) {
            var opt=th.value;//获取到当前点击的按钮
            var num=document.querySelector('#txt_count').value;//找到数量框
            var acount=0;
            var xiaoji=document.querySelector("#account");//获取到小计那一列的输入框
            var jia=document.querySelector("#jia");//获取到加号按钮
            var jian=document.querySelector("#jian");//获取到减号按钮

            if (opt=='+'){
                    num++;
                    jian.removeAttribute('disabled');//去除属性disabled
            } else {
                if (num>1){
                    num--;
                } else {
                    jian.setAttribute('disabled',true);//设置属性disabled,不能用
                }
            }
            document.querySelector('#txt_count').value=num;
            acount=num*6999;

            xiaoji.innerText=acount;//设置文本为acount
        }
    </script>
</div>