JavaScript_1_练习：用户输入信息后打印订单

最新推荐文章于 2024-09-14 18:52:56 发布

泠泠七弦上111

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量250

点赞数 3

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2301_81057751/article/details/140331366

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果图

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习：用户输入信息后打印订单</title>
  <style>
    table {
      margin: auto;
      border-collapse: collapse;
    }

    h2,
    th,
    td {
      text-align: center;
    }

    th,
    td {
      padding: 5px 20px;
      border: 1px solid #666;

    }
  </style>
</head>

<body>
  <h2>订单付款确认页面</h2>
  <script>
    let productName = prompt('请输入商品名称：')
    let price = Number(prompt('请输入商品价格：'))
    let number = Number(prompt('请输入商品数量：'))
    let address = prompt('请输入收货地址：')
    let sum = price * number
    document.write(`
    <table>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>总价</th>
      <th>收货地址</th>
    </tr>
    <tr>
      <td>${productName}</td>
      <td>${price}元</td>
      <td>${number}</td>
      <td>${sum}元</td>
      <td>${address}</td>
    </tr>
  </table>
    `)
  </script>
</body>

</html>