价格计算

2018-06-24 01:27:30来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<script>
window.onload = function()
{
var oUl = document.getElementById('list');
var oTotalPrice = document.getElementById('totalPrice');
var oExpensive = document.getElementById('expensive');
var aLi = oUl.getElementsByTagName('li');
var aSpan = oUl.getElementsByTagName('span');
var aEm= oUl.getElementsByTagName('em');
var aFont = oUl.getElementsByTagName('font');

function fnComputer(aLi){
//var aLi = oUl.getElementsByTagName('li')[0];

var aInput = aLi.getElementsByTagName('input');
var aSpan = aLi.getElementsByTagName('span')[0];
var aEm= aLi.getElementsByTagName('em')[0];
var aFont = aLi.getElementsByTagName('font')[0];

aInput[1].onclick = function(){
var nProNum = parseInt(aSpan.innerHTML)+1;
aSpan.innerHTML = nProNum;
var nProPrice = parseFloat(aEm.innerHTML);
var totalPrice = nProPrice*nProNum;
aFont.innerHTML = totalPrice+ '元';
sum();
}

aInput[0].onclick = function(){
var nProNum = parseInt(aSpan.innerHTML)-1;
if(nProNum<0){
nProNum=0;
}
aSpan.innerHTML = nProNum;
var nProPrice = parseFloat(aEm.innerHTML);
var totalPrice = nProPrice*nProNum;
aFont.innerHTML = totalPrice+ '元';
sum();

}
}

for(var i=0;i<aLi.length;i++){
fnComputer(aLi[i]);
}

function sum(){
var totalPrice = 0;
var nProNum = 0;
var nExpenPrice = 0;

for(var i=0;i<aFont.length;i++){
totalPrice += parseFloat(aFont[i].innerHTML);
nProNum += parseInt(aSpan[i].innerHTML);

if(aSpan[i].innerHTML != 0){

if(parseFloat(nExpenPrice)<parseFloat(aEm[i].innerHTML)){
nExpenPrice = aEm[i].innerHTML;
}

}
}

oTotalPrice.innerHTML = '商品总价为:'+totalPrice+'$';
oExpensive.innerHTML = '最贵商品的单价:'+nExpenPrice+', 共'+nProNum+'件';
}
};
</script>
<body>
<ul id="list">
<li><input type="button" value="-"> <span>0</span> <input type="button" value="+" > <em>20$</em> <font>0元</font></li>
<li><input type="button" value="-"> <span>0</span> <input type="button" value="+" > <em>11$</em> <font>0元</font></li>
<li><input type="button" value="-"> <span>0</span> <input type="button" value="+" > <em>100$</em> <font>0元</font></li>
<li><input type="button" value="-"> <span>0</span> <input type="button" value="+" > <em>320$</em> <font>0元</font></li>
</ul>
<p id="totalPrice">商品总价为:0$</p>
<p id="expensive">最贵商品的单价:0$ , 共0件</p>
</body>
</html>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【原创内容】获取百度网盘大小文件真实下载地址 支持单个文件下

下一篇:从零开始学习前端JAVASCRIPT — 7、JavaScript基础EVENT