商品结算

时间：2023-3-9 22:00 作者：小诸葛 分类： JavaScript 正在检查是否收录...
效果图

商品结算
代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body {
                background-color: #b9b9b9;
            }

            h1 {
                padding: 20px 0;
                text-align: center;
                border-bottom: 1px dashed;
            }

            .sp {
                box-sizing: border-box;
                margin: 0 auto;
                width: 500px;
                background-color: #fff;
                border-radius: 15px;
                box-shadow: 4px 3px 5px #000000;
            }

            input {
                font-size: 16px;
                font-weight: bold;
                padding: 0 10px;
                margin: 5px 0;
                margin-left: 10px;
                width: 200px;
                height: 40px;
                border: 0;
                box-shadow: inset 0px 1px 4px #000000;
                outline-color: #ffffff;
                border-radius: 15px;

            }

            p {
                margin-left: 20px;
                b
            }

            #sum {
                color: #aa0000;
                width: 100px;
            }

            .sp #button {
                text-align: center;
            }

            button {
                border-radius: 5px;
                width: 40%;
                height: 50px;
                border: 0;
                background-color: #55aaff;
                color: #fff;
                box-shadow: 0px 1px 4px #000000;
                margin: 20px 0;
            }

            button:hover {
                box-shadow: inset 0px 1px 4px #000000;
            }

            #freight {
                outline: none;
            }
        </style>
    </head>
    <body>
        <!--    8.  场景题: 小明在网上购物，买了3个笔记本，每个5.78元，商家不包邮，还需要付4元运费，
        但他有一张满10元减2元的优惠券，编程计算出最终小明要支付的金额。请使用变量存储数据，
        变量 num保存数量，price保存价格，freight保存运费，coupon保存优惠券（考点：编程思维、变量使用、运算符） -->
        <div class="sp">
            <h1>商品自助结算页面</h1>
            <p>数量:<input type="text" id="num" placeholder="请输入购买数量"></p>
            <p>价格:<input type="text" id="price" placeholder="请输入价格"></p>
            <p>运费:<input type="text" id="freight" value="4" disabled>&emsp;总价:<input type="text" id="sum" disabled></p>
            <p id="button"> <button id="jes">结算</button></p>
        </div>

        <script type="text/javascript">
            jes.onclick = function() {
                let num = Number(document.getElementById("num").value); //数量
                let price = Number(document.getElementById("price").value); //价格
                let freight = Number(document.getElementById("freight").value); //运费
                let sum = num * price + freight; //根据获取的对应值，计算总价赋值给sum
                if (num == '') { //判断是否输入购买数量
                    alert('请输入购买数量'); //没有输入就弹窗提示

                } else if (price == '') { //判断是否输入购买价格
                    alert('请输入价格'); //没有输入就弹窗提示
                } else if (sum >=10) { //满足以上2个条件执行第三个,判断总价是否满足使用优惠券条件
                    sum = sum - 2;
                    alert('恭喜你已经使用满10元-2元优惠券');
                    document.getElementById("sum").value = sum;
                } else {
                    document.getElementById("sum").value = sum; //满足前2个,不满足第三个,则执行否则[else],然后退出程序return 0
                    return 0; //退出程序
                }
            }
            // 作业
            let num = 3; //数量
            let price = 5.78; //价格
            let freight = 4; //运费
            let coupon = 10; //优惠券
            let sum = num * price + freight; //计算笔记本总价格

            if (sum > coupon) { //判断笔记本总价格是否满足优惠券使用，满足-2。
                sum = sum - 2;
            }  
            console.log('数量：',num,'单价：',price,'运费：',freight,'总价格：', sum); //输出最终价格

           let a=10;
           let b=5;
           let c="5";
           console.log(a==b);
           console.log(b==c);
           console.log(b===c);
           console.log(b!==c);
           console.log(a!=b);
        </script>
    </body>
</html>
商品结算
扫描二维码，在手机上阅读