JavaScript习题练习

发布于:2024-11-29 ⋅ 阅读:(35) ⋅ 点赞:(0)

在这里插入图片描述

<!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也可以)

  1. 获取用户输入
    • 使用prompt()函数或者HTML表单元素来获取用户输入的pricenumaddress
    • 例如,使用prompt()函数:
      let price = parseFloat(prompt("请输入商品价格:"));
      let num = parseInt(prompt("请输入商品数量:"));
      let address = prompt("请输入收货地址:");
      
  2. 计算总价格
    • 根据用户输入的价格和数量计算总价格。
    • 例如:
      let total = price * num;
      
  3. 生成订单信息表格
    • 使用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);
      
  4. 使用模板字符串(可选)
    • 如果要使用模板字符串来格式化订单信息,可以这样做:
      let orderInfo = `
        商品价格:${price}
        商品数量:${num}
        收货地址:${address}
        总价格:${total}
      `;
      console.log(orderInfo);
      // 或者将orderInfo填充到表格或其他展示元素中
      

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