模拟购物车
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模拟购物车</title>
<style type="text/css">
#main
{
width:800px;
height:700px;
margin:auto;
}
#top,#bottom
{
width:800px;
height:300px;
border:1px #333333 solid;
}
#bottom
{
visibility:hidden;
height:400px;
}
.txtClass
{
width:180px;
height:25px;
border:1px #666666 dotted;
}
.btClass
{
width:45px;
height:25px;
background-color:#999999;
}
</style>
<script type="text/javascript">
var currentColor="";
function selectAll()
{
var ckArray=document.all.ck;
for(var i=0;i<ckArray.length;i++)
{
ckArray[i].checked=true;
}
}
function selectReserve()
{
var ckArray=document.all.ck;
for(var i=0;i<ckArray.length;i++)
{
ckArray[i].checked=(ckArray[i].checked)?false:true;
}
}
function compute()
{
//创建表头
var strTable="<table border='1' width='798' height='398' style='border-collapse:collapse'><tr bgcolor='#006699' height='30'><td colspan='4'><font face='宋体' size='6'>你购买的产品清单</font></td></tr><tr><td>产品名称</td><td>单价</td><td>数量</td><td>金额</td></tr>";
var totalPrice=0;
var ckArray=document.all.ck;
for(var i=0;i<ckArray.length;i++)
{
//判断用户购买了那些产品
if(ckArray[i].checked)
{
//获取复选框的值和id(分别代表产品的单价和名称)
var price=ckArray[i].value;
var proName=ckArray[i].id;
//获取购买数量
var num=document.getElementById("txt"+proName).value;
num=(num=="")?1:num;
totalPrice+=parseFloat(price*num);
strTable+="<tr bgcolor='#999999' onmouseover='mouseOver(this)' onmouseout='mouseOut(this)'><td width='50'>"+proName+"</td><td>"+price+"</td><td>"+num+"</td><td>"+(parseFloat(price*num)).toFixed(2)+"</td></tr>";
}
}
strTable+="<tr><td colspan='4'>总金额:￥"+totalPrice.toFixed(2)+"</td></tr></table>";
bottom.style.visibility="visible";
bottom.innerHTML=strTable;
}
function mouseOver(obj)
{
currentColor=obj.style.backgroundColor;
obj.style.backgroundColor="#006699";
}
function mouseOut(obj)
{
obj.style.backgroundColor=currentColor;
}
</script>
</head>
<body>
<div id="main">
<div id="top">
<table width="798" border="1" style="border-collapse:collapse">
<tr>
<td width="182">商品名称</td>
<td width="162">单价（元）</td>
<td width="213">数量</td>
<td width="655">购买</td>
</tr>
<tr>
<td>西红柿</td>
<td >1.8/kg</td>
<td><input type="text" name="txt西红柿" id="txt西红柿" class="txtClass"/></td>
<td><input type="checkbox" name="ck" value="1.8" id="西红柿" />
<label for="checkbox">购买</label></td>
</tr>
<tr>
<td>黄瓜</td>
<td>3.5/kg</td>
<td><input type="text" name="txt黄瓜" class="txtClass"/></td>
<td><input type="checkbox" name="ck" value="3.5" id="黄瓜" />
<label for="checkbox2">购买</label></td>
</tr>
<tr>
<td>西瓜</td>
<td>2.9/kg</td>
<td><input type="text" name="txt西瓜" class="txtClass"/></td>
<td><input type="checkbox" name="ck" value="2.9" id="西瓜" />
<label for="checkbox3">购买</label></td>
</tr>
<tr>
<td>洋葱</td>
<td>1.0/kg</td>
<td><input type="text" name="txt洋葱" class="txtClass"/></td>
<td><input type="checkbox" name="ck" value="1.0" id="洋葱" />
<label for="checkbox4">购买</label></td>
</tr>
<tr>
<td>苹果</td>
<td>3.5/kg</td>
<td><input type="text" name="txt苹果" class="txtClass"/></td>
<td><input type="checkbox" name="ck" value="3.5" id="苹果" />
<label for="checkbox5">购买</label></td>
</tr>
<tr>
<td colspan="4"><input name="selectAll" type="button" id="selectAll" value="全选" class="btClass" onclick="selectAll()" />
<input name="selectReserve" type="button" id="selectReserve" value="反选" class="btClass" onclick="selectReserve()"/>
<input name="compute" type="button" id="compute" value="结算" class="btClass" onclick="compute()" /></td>
</tr>
</table>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
