<!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()函数：let price = parseFloat(prompt("请输入商品价格：")); let num = parseInt(prompt("请输入商品数量：")); let address = prompt("请输入收货地址：");
- 使用
- 计算总价格
- 根据用户输入的价格和数量计算总价格。
- 例如：
let total = price * num;
- 生成订单信息表格
- 使用HTML和JavaScript来生成一个包含订单信息的表格。可以使用
document.createElement()等方法来创建表格元素，并将数据填充进去。 - 例如：
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);
- 使用HTML和JavaScript来生成一个包含订单信息的表格。可以使用
- 使用模板字符串（可选）
- 如果要使用模板字符串来格式化订单信息，可以这样做：
let orderInfo = ` 商品价格：${price} 商品数量：${num} 收货地址：${address} 总价格：${total} `; console.log(orderInfo); // 或者将orderInfo填充到表格或其他展示元素中
- 如果要使用模板字符串来格式化订单信息，可以这样做：
主要涉及到变量的使用、数据计算和页面元素的操作