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

  1. 获取用户输入

    • 使用prompt()函数或者HTML表单元素来获取用户输入的pricenumaddress

    • 例如,使用prompt()函数:

      javascript 复制代码
      let price = parseFloat(prompt("请输入商品价格:"));
      let num = parseInt(prompt("请输入商品数量:"));
      let address = prompt("请输入收货地址:");
  2. 计算总价格

    • 根据用户输入的价格和数量计算总价格。

    • 例如:

      javascript 复制代码
      let total = price * num;
  3. 生成订单信息表格

    • 使用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);
  4. 使用模板字符串(可选)

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

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

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

相关推荐
bst@微胖子41 分钟前
Python高级语法之selenium
开发语言·python·selenium
王小义笔记1 小时前
Postman如何流畅使用DeepSeek
开发语言·测试工具·lua·postman·deepseek
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
java1234_小锋3 小时前
一周学会Flask3 Python Web开发-request请求对象与url传参
开发语言·python·flask·flask3
流星白龙5 小时前
【C++】36.C++IO流
开发语言·c++
诚信爱国敬业友善6 小时前
常见排序方法的总结归类
开发语言·python·算法
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
nbsaas-boot7 小时前
Go 自动升级依赖版本
开发语言·后端·golang
架构默片7 小时前
【JAVA工程师从0开始学AI】,第五步:Python类的“七十二变“——当Java的铠甲遇见Python的液态金属
java·开发语言·python
不只会拍照的程序猿8 小时前
从插入排序到希尔排序
java·开发语言·数据结构·算法·排序算法