需求:用户输入商品价格和商品数量,以及收货地址,可以自动打印订单信息
分析: ①:需要输入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>