JavaScript -- 用户订单信息案例

是合合呀

已于 2023-12-15 17:35:07 修改

阅读量736

点赞数 2

文章标签： javascript

于 2023-11-06 16:27:36 首次发布

本文链接：https://blog.csdn.net/dl3464/article/details/134245086

版权

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

1 --- JavaScript基础（实战案例）

◆变量

◆常量

◆数据类型

◆类型转换

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

分析

① 需要3个变量：price，num，address
② 需要计算总价，total
③ 需要自动生成，页面打印生成表格，里面填充数据即可
④ 最好用模版字符串

CSS

        h2 {
            text-align: center;
        }
        table {
            /*合并相邻边框*/
            border-collapse: collapse;
            height: 80px;
            margin: auto;
            text-align: center;
        }
        th {
            padding: 5px 30px;
        }
        table,th,td {
            border: 1px solid #000;
        }

HTML

 <h2>订单确认</h2>
    <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
        </tr>
        <tr>
            <td>小米手机</td>
            <td>1888元</td>
            <td>10</td>
            <td>100</td>
            <td>魔法城堡111</td>
        </tr>
    </table>

方法一：js字符串拼接

用户输入
        let price = prompt('请输入商品价格：')
        let num = prompt('请输入商品数量：')
        let address = prompt('请输入商品地址：')
计算总额
        let total = num * price      隐式转换 * 乘号，prompt默认是字符串
页面打印渲染
        document.write(`
            <h2>订单确认</h2>
            <table>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>总价</th>
                    <th>收货地址</th>
                </tr>
                <tr>
                    <td>小米手机</td>
                    <td>${price}元</td>
                    <td>${num}个</td>
                    <td>${total}元</td>
                    <td>${address}</td>
                </tr>
            </table>
        `)

方法二：获取DOM元素并修改

innerText 只能解析文本，无法解析标签
innerHTML 可以识别标签

        方法二：获取Dom元素并修改       
      
        let tds = document.querySelectorAll('td')
       
        tds[1].innerText= `${price}元`
        tds[2].innerText= `${num}个`
        tds[3].innerText= `${total}元`
        tds[4].innerText= `${address}`