用户订单信息案例

news2024/12/22 18:48:16

需求:
用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息
分析:
① 需要输入3个数据，所以需要3个变量来存储price num address
② 需要计算总的价格total
③ 页面打印生成表格, 里面填充数据即可
④ 记得最好使用模板字符串

【示例代码】

<!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>
        h2 {
            text-align: center;
        }

        table {
            border-collapse: collapse;
            height: 80px;
            margin: 0 auto;
            text-align: center;
        }

        table,
        th,
        td {
            border: 1px solid #000;
        }

        th {
            padding: 5px 20px;
        }
    </style>
</head>

<body>
    <h2>订单确认</h2>

    <script>
        // 1.用户输入
        let price = +prompt('请输入商品价格：')
        let num = +prompt('请输入商品数量：')
        let address = prompt('请输入收货地址：')
        // 2.计算总额
        let total = price * num
        // 3.页面打印
        document.write(`
        <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
        </tr>
        <tr>
            <td>小米手机</td>
            <td>${price}元</td>
            <td>${num}</td>
            <td>${total}元</td>
            <td>${address}</td>
        </tr>
    </table>
        `)
    </script>
</body>

</html>