Web前端开发JavaScript html
编写程序，按照以下要求完成订单总金额计算并输出结果。
(1)定义数组，保存用户每笔订单的所有商品金额，例如[100，200，300]
(2)计算总额，并按照如下活动规则计算应付款。
①满300减30，满200减10，满100 减3。
②老会员折上9.8折。
（3）在页面输出各项商品金额、总额和应付款。
let list = [50,20,130];
let sum = 0; //总计
let total = 0; //应付款
let isOld = true;//是否老顾客
list.forEach((item,index)=>{
sum += item;
console.log(`商品${index+1}:${item}元`)
})
if(sum>=300) total = sum - 30;
else if(sum>=200) total = sum - 10;
else if(sum>=100) total = sum -3;
if(isOld) total = total * 0.98;
console.log(`商品总计: ${sum}元,应付款:${total}元`)
如有帮助，望采纳
望采纳！不清楚的可以问。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightly-HTML-Project</title>
</head>
<script>
let prices = [100, 200, 300];
let sum = 0;
let total=0;
let isVip = true;
let money = 0;
prices.map((price) => {
sum = price;
if (sum >= 300) {
money = sum - 30;
} else if (sum >= 200) {
money = sum - 20;
} else if (sum >= 100) {
money = sum - 3;
}
if (isVip) {
total=money*0.98;
}
console.log("商品金额:"+price+"总额:"+money+"应付款:"+total)
document.write("<p>"+"商品金额:"+price+"总额:"+money+"应付款:"+total+"</p>");
})
//在页面输出各项商品金额、总额和应付款
</script>
<body>
<p>Hello World!</p>
</body>
</html>
<!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>
</head>
<body>
<ul>
<table border="1" cellspacing="0" cellpadding="10" align="center">
<thead align="center">
<tr>
<th colspan="6">商品统计表</th>
</tr>
</thead>
<tbody id="tbody" align="center">
<tr>
<td>-</td>
<td>价格</td>
<td>满减</td>
<td>会员折扣</td>
<td>总计</td>
<td>操作</td>
</tr>
</tbody>
<tfoot align="center">
<tr>
<td>总计:</td>
<td id="total_price">-</td>
<td>-</td>
<td>-</td>
<td id="local_price">0</td>
<td><button onclick='shop.total()'>统计</button></td>
</tr>
</tfoot>
</table>
</ul>
<script>
var html = function (index) {
return `<tr class="price_tr">
<td>
<input style="width:100%;height:100%;border: none;text-align: center;" maxlength="8" type="text"
placeholder="商品">
</td>
<td>
<input class="form_price" oninput='shop.change(${index})' style="width:100%;height:100%;border: none;text-align: center;" maxlength="8" type="number"
placeholder="金额">
</td>
<td>
<input type="radio" class='krake' >
<label >
<select class="zk" style="text-align: center;">
<option value="30">满300减30</option>
<option value="10">满200减10</option>
<option value="3">满100 减3</option>
</select>
</label>
</td>
<td>
<input type="radio" class='kraken' >
<label >
<select class="vip" style="text-align: center;">
<option value="0.98">9.8</option>
</select>
</label>
</td>
<td class="local_price">0</td>
<td><button onclick='shop.remove(${index})'>删除</button> <button onclick='shop.add()'>增加</button> <button onclick='shop.local_Total(${index})'>统计</button></td>
</tr>`}
class Shop {
constructor(obj) {
this.tbody = obj.tbody;
this.tbleList = obj.tbleList;
}
// 初始化
init() {
this.tbody.innerHTML = this.tbleList.map((item, index) => {
return item(index)
}).join('')
}
// 增加
add() {
this.tbleList.push(html);
this.tbody.innerHTML = this.tbleList.map((item, index) => {
return item(index)
}).join('');
}
// 删除
remove(e) {
this.tbleList.splice(e, 1);
this.tbody.innerHTML = this.tbleList.map((item, index) => {
return item(index)
}).join('');
// console.log(e, '=====e')
//e.parentNode.parentNode.removeChild(e.parentNode) // 删除 父节点 的父节点不好维护
}
// 总价总计
total() {
let form_price = document.getElementsByClassName('form_price');
let local_price = document.getElementsByClassName('local_price');
let total = 0, local_total = 0;
for (let i = 0; i < form_price.length; i++) {
total += form_price[i].value * 1
local_total += local_price[i].innerHTML * 1
}
document.getElementById('total_price').innerHTML = total
document.getElementById('local_price').innerHTML = local_total
}
// 局部统计
local_Total(index) {
// 获取一列的dom
let form_price = document.getElementsByClassName('price_tr');
// 获取输入的金额
let local_price = form_price[index].getElementsByClassName('form_price')[0].value;
if (!local_price) {
alert('请输入金额')
return
}
// 获取选择折扣满减数据
// console.log('local_vip===', local_vip)
// let zk = form_price[index].getElementsByClassName('zk')[0].value;
// 获取折扣
let vip = form_price[index].getElementsByClassName('vip')[0].value;
// 是否能打折
// 获取选择折扣
let local_zk = form_price[index].getElementsByClassName('krake')[0].checked;
// 获取选择折扣vip
// console.log('local_zk===', local_zk)
let local_vip = form_price[index].getElementsByClassName('kraken')[0].checked;
if (local_zk) {
local_price = local_price - form_price[index].getElementsByClassName('zk')[0].value
}
if (local_vip) {
local_price = (local_price * vip).toFixed(1)
}
form_price[index].getElementsByClassName('local_price')[0].innerHTML = local_price;
}
change(index) {
// 获取一列的dom
let form_price = document.getElementsByClassName('price_tr');
let local_price = form_price[index].getElementsByClassName('form_price')[0].value;
if (local_price >= 300) {
form_price[index].getElementsByClassName('zk')[0].value = 30
} else if (local_price >= 200) {
form_price[index].getElementsByClassName('zk')[0].value = 10
} else if (local_price >= 100) {
form_price[index].getElementsByClassName('zk')[0].value = 3
}
}
}
let shop = new Shop({
tbody: document.getElementById('tbody'),
tbleList: [html],
});
shop.init()
</script>
</body>
</html>