JavaScript习题练习

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>订单信息打印</title>
</head>
<body>
    <form id="orderForm">
        <label for="price">商品价格:</label>
        <input type="number" id="price" name="price"><br><br>
        <label for="num">商品数量:</label>
        <input type="number" id="num" name="num"><br><br>
        <label for="address">收货地址:</label>
        <input type="text" id="address" name="address"><br><br>
        <button type="button" onclick="printOrderInfo()">打印订单信息</button>
    </form>

    <div id="orderInfo"></div>

    <script>
        function printOrderInfo() {
            const price = document.getElementById('price').value;
            const num = document.getElementById('num').value;
            const address = document.getElementById('address').value;
            const total = price * num;

            const orderInfo = `
                <h2>订单信息</h2>
                <table border="1">
                    <tr>
                        <th>商品价格</th>
                        <td>${price}</td>
                    </tr>
                    <tr>
                        <th>商品数量</th>
                        <td>${num}</td>
                    </tr>
                    <tr>
                        <th>收货地址</th>
                        <td>${address}</td>
                    </tr>
                    <tr>
                        <th>总价格</th>
                        <td>${total.toFixed(2)}</td>
                    </tr>
                </table>
            `;

            document.getElementById('orderInfo').innerHTML = orderInfo;
        }
    </script>
</body>
</html>

在这个HTML页面中，我们有一个表单，用户可以输入商品价格、商品数量和收货地址。当用户点击"打印订单信息"按钮时，printOrderInfo函数会被调用。这个函数会获取用户输入的值，计算总价格，然后使用模板字符串创建一个包含订单信息的HTML表格，并将其显示在页面上。

请注意，这个示例使用了.toFixed(2)来格式化总价格，使其保留两位小数。此外，这个示例假设用户会输入有效的数字。在实际应用中，您可能需要添加一些错误检查来确保输入的有效性。

这张图片是一个用户订单信息案例的分析，主要内容如下：

1. 需求

用户输入商品价格、商品数量和收货地址，可以自动打印订单信息。

2. 分析

① ：需要输入3个数据，所以需要3个变量来存储。这3个变量分别是price（价格）、num（数量）和address（地址）。
② ：需要计算总的价格。为此需要一个变量total来存储总价格，计算公式通常是total = price * num。
③：页面打印生成表格，里面填充数据即可。这意味着需要在网页上创建一个表格，并将用户输入的数据（价格、数量、地址和计算得出的总价格）填充到表格中。
④：记得最好使用模板字符串。模板字符串可以方便地将变量嵌入到字符串中，例如在生成订单信息时，可以使用模板字符串来格式化输出内容，使其更加清晰和易读。

实现思路（以JavaScript为例，当然，python的flask也可以）

获取用户输入

使用prompt()函数或者HTML表单元素来获取用户输入的price、num和address。

例如，使用prompt()函数：

javascript 复制代码

let price = parseFloat(prompt("请输入商品价格："));
let num = parseInt(prompt("请输入商品数量："));
let address = prompt("请输入收货地址：");

计算总价格
- 根据用户输入的价格和数量计算总价格。
- 例如：
  javascript 复制代码
```
let total = price * num;
```

生成订单信息表格

使用HTML和JavaScript来生成一个包含订单信息的表格。可以使用document.createElement()等方法来创建表格元素，并将数据填充进去。

例如：

javascript 复制代码

let table = document.createElement('table');
let row1 = table.insertRow(0);
let cell1 = row1.insertCell(0);
cell1.innerHTML = "商品价格";
let cell2 = row1.insertCell(1);
cell2.innerHTML = price;
// 类似地填充其他数据（数量、地址、总价格）
document.body.appendChild(table);

使用模板字符串（可选）

如果要使用模板字符串来格式化订单信息，可以这样做：

javascript 复制代码

let orderInfo = `
  商品价格：${price}
  商品数量：${num}
  收货地址：${address}
  总价格：${total}
`;
console.log(orderInfo);
// 或者将orderInfo填充到表格或其他展示元素中

主要涉及到变量的使用、数据计算和页面元素的操作