黑马前端——days12_js

最新推荐文章于 2024-11-02 15:48:17 发布

胆怯与勇敢

最新推荐文章于 2024-11-02 15:48:17 发布

阅读量193

点赞数 2

分类专栏：黑马前端文章标签：前端

本文链接：https://blog.csdn.net/qq_52652401/article/details/141286065

版权

黑马前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

页面框架文件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h2>订单确认</h2>
  <script src="index.js"></script>
</body>

</html>

格式文件

h2 {
  text-align: center;
}

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

td {
  padding: 0px 50px;
}

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

事件文件

// 1.用户输入
let price = +prompt("请输入商品价格：")
let num = +prompt("请输入商品数量：")
let address = prompt("请输入收获地址：")
// 2.计算总额
let total = price * num
// 3.页面打印渲染
document.write(`
  <table>
      <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>
`)