购物车-demo

要求实现的功能:

在网页中显示一个表格,第一行为:序号,物品名称,单价,数量,小计,下面的每一行为商品的数据.
点击加号按钮和减号按钮可以实现数量的加减,最低减到1,右边小计可以实现单价*数量的计算并显示

结果图:

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style type="text/css">
        .cart-css{
            /*外层div的样式*/
            width:500px;
            height:300px;
            margin: 100px auto;
            background: #ff7a39;
        }
        table{
            /*购物车的table表格显示样式*/
            width: 100%;
        }
        .text-css{
            /*数量输入框样式*/
            width: 25px;
        }
    </style>
</head>
<body>
    <div class="cart-css">
        <table>
            <tr>
                <!--tr标签表示创建一行,td标签表示加一个数据-->
                <td>序号</td>
                <td>物品名称</td>
                <td>单价</td>
                <td>数量</td>
                <td>小计</td>

            </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>
</body>
</html>

要求实现的功能:

猜你喜欢