用户订单信息案例

380 阅读1分钟

需求:用户输入商品价格和商品数量,以及收货地址,可以自动打印订单信息

分析: ①:需要输入3个数据,所以需要3个变量来存储 price num address ②:需要计算总的价格 total ③:页面打印生成表格,里面填充数据即可 ④:记得最好使用模板字符串

<style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      margin: 0 auto;
      text-align: center;
      /* 合并边框 */
      border-collapse: collapse;
    }

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

    table caption {
      margin: 15px 0;
    }
  </style>
  <script>
    let price = prompt('请输入商品的价格:')
    let num = prompt('请输入商品的数量:')
    let address = prompt('请输入收货地址:')
    //计算总和
    total = price * num
    document.write(`//模板字符串 渲染到表格
  <table>
    <caption>
      <h1>订单付款确认页面</h1>
    </caption>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>总价</th>
      <th>收货地址</th>
    </tr>
    <tr>
      <td>小米手机青春PLUS</td>
      <td>${price}</td>
      <td>${num}</td>
      <td>${total}</td>
      <td>${address}</td>
    </tr>
  </table>
    `)
  </script>