JavaScript 实例：当当网购物车统计总价

最新推荐文章于 2024-06-18 11:26:21 发布

houyanhua1

最新推荐文章于 2024-06-18 11:26:21 发布

阅读量1.7w

点赞数 8

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/houyanhua1/article/details/78555002

版权

本文介绍了如何使用JavaScript来计算当当网购物车中的商品总价。通过遍历表格数据，实现了对购物车中所有商品价格的累加，从而得出总价。

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

当当网购物车统计总价。循环表格所有行(或列)统计计算总价。

关键代码：

<script type="text/javascript">
function productCount()
{
	//变量初始化
	var total = 0; //总金额
	var jiesheng = 0; //总节省
	var jifen = 0; //总积分

	//获取id=shopList表格对象
	var tableObj = document.getElementById("shopList");
	//获取表格中所有的行
	var arr_trs = tableObj.rows;  //获取表格所有行，是一个数组，见到数组就循环
	//循环所有行
	for(var i=0;i<arr_trs.length;++i)
	{
		//取出每一行中的所有列(单元格)
		var arr_tds = arr_trs[i].cells; 
		//取出数量
		var count = arr_tds[4].firstChild.value;  //firstChild是input元素，取出input的value值。
		//当当价和市场价
		var price1 = arr_tds[2].innerHTML.substr(1);  //substr(1)把前面的"￥"给截取掉。
		                     //     "￥32.00".substr(1) —> "32.00"
		var price2 = parseFloat(arr_tds[3].innerHTML.substr(1));
		                     // "￥18.90(59折)".substr(1)—> "18.90(59折)"
							 // parseFloat("18.90(59折)")—> 18.9  parseFloat截取数值，去掉后面的非数值(括号)。
		//计算总金额
		total += price2 * count;  //数值型字符串可以直接运算。
		//总节省金额
		jiesheng += (price1-price2)*count;
		//总积分
		jifen += arr_tds[1].innerHTML * count;
	}
	//写入结果
	document.getElementById("total").innerHTML = "¥"+total.toFixed(2);
	document.getElementById("jiesheng").innerHTML = "¥"+jiesheng.toFixed(2);
	document.getElementById("jifen").innerHTML = jifen;
}
</script>

完整代码(css样式不重要)：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>当当网购物车页面</title>
<link href="css/layou2t.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
  *{
    margin:0px;
	padding:0px;
  }
  .shopping_commend{
	background-image:url(../images/shopping_commend_bg.gif);
	background-repeat:repeat-x;
	height:21px;
	border:solid 1px #999;
	}
	.shopping_commend_left{
		float:left;
		padding-left:10px;
		}
	.shopping_commend_right{
		float:right;
		padding-right:10px;
		margin-top:3px;
		}
	.shopping_commend_right img{
		cursor:pointer;
		}
#shopping_commend_sort{
	border:solid 1px #999;
	border-top:0;
	padding:5px 20px 5px 20px;
	height:120px;
	}
	.shopping_commend_sort_left{
		float:left;
		width:450px;
		}
	.shopping_commend_sort_mid{
		float:left;
		width:15px;
		background-image:url(../images/shopping_dotted.gif);
		background-repeat:repeat-y;
		height:120px;
		}
	.shopping_commend_list_1,.shopping_commend_list_2,.shopping_commend_list_3,.sh

最低0.47元/天解锁文章

houyanhua1

关注

8
点赞
踩
59

收藏

觉得还不错? 一键收藏
1
评论
JavaScript 实例：当当网购物车统计总价

当当网购物车统计总价。循环表格所有行(或列)统计计算总价。关键代码：function productCount(){ //变量初始化 var total = 0; //总金额 var jiesheng = 0; //总节省 var jifen = 0; //总积分 //获取id=shopList表格对象 var tableObj = document.getEleme
复制链接

扫一扫