JavaScript小案例——商品订单信息

momo不吃辣

已于 2022-08-06 13:11:21 修改

阅读量2.8k

点赞数 1

文章标签： javascript 前端

于 2022-08-06 13:08:35 首次发布

本文链接：https://blog.csdn.net/weixin_54645034/article/details/126193154

版权

本文介绍了一个JavaScript小案例，用户输入商品价格、数量及收货地址后，程序会自动生成订单信息。通过HTML设计表格，并结合JavaScript进行数据填充，采用模板字符串优化代码实现。

摘要由CSDN通过智能技术生成

题目要求

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

步骤要点

1.能够按顺序输入价格，数量，地址的信息。

2.表格要先用HTML设计出来，再配合JavaScript填充进去。

3.最好利用模板字符串。

代码实现

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

<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>
    <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;

        }
    </styl