桦山涧

桦山涧
Asp.net ---->知识改变命运!
posts - 261, comments - 171, trackbacks - 6, articles - 3
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

公告

无聊用js写了一个模拟的购物车[原]

Posted on 2008-08-08 18:15 桦林 阅读(...) 评论(...) 编辑 收藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Huashanlin购物车模拟(javascript)</title>
<style type="text/css">
table
{
background-color
:#000000;
}
td
{
background-color
:#FFFFFF;
text-align
:center;
height
:30px;
}
span
{
background-color
:#FFFFCC;
border
:#66CCFF 1px solid;
cursor
:hand;
}
#Info
{
float
:left;
}
#btnAdd
{
float
:right;
background-color
:#0000CC;
}
#Test
{
width
:900px;
}
</style>
<script type="text/javascript"> 
//给出填写数量的文本框
function MadeText()
{
    
var d=window.event.srcElement.parentElement.parentElement.rowIndex;
    document.getElementById(
"test").rows(d).cells(2).innerHTML="<input title='填写想购买的数量,请使用合法数字字符' id='Num"+d+"' type='text' onchange='EveryCount();' >";
 } 
//计算单个小计
 function EveryCount()
 {
     
var index=window.event.srcElement.parentElement.parentElement.rowIndex;
     
var a=document.getElementById("test").rows(index).cells(1).innerText;
    
var b=document.getElementById("Num"+index).value;
    
var c=parseInt(a)*parseInt(b);
    document.getElementById(
"test").rows(index).cells(3).innerText=c;
    TotalCount();
 }
//计算总计
 function TotalCount()
 {
     
var rowscount=document.getElementById("test").rows.length;
    
var sum=0;
    
for(var i=1;i<=(parseInt(rowscount)-1);i++)
    {
        
var littecount=document.getElementById("test").rows(i).cells(3).innerText;
        sum
=parseInt(sum)+parseInt(littecount);
    }
    document.getElementById(
"total").innerText=sum;
 }
//提交订单
 function AddOrder()
 {
     
var total=document.getElementById("total").innerText;
    alert(
"您的订单已经提交成功,总计[  "+total+"元  ]人民币,请您核实一下,谢谢您的光临!欢迎再来!");
 }
</script>
</head>

<body>
<div>请填写合法的购物数量,使用数字!</div>
<div id="Cart">
  
<table id="test" width="900px" border="0" cellpadding="0" cellspacing="1">
    
<tr>
      
<td width="30%">商品名称</td>
      
<td>单价(¥)</td>
      
<td>数量</td>
      
<td>小计</td>
    
</tr>
    
<tr>
      
<td>钢笔</td>
      
<td>23.00</td>
      
<td id="dd"><span title="购买商品并填写数量" id="Shopping1" onclick="MadeText();">放入购物车</span></td>
      
<td>0</td>
    
</tr>
    
<tr>
      
<td>笔记本</td>
      
<td>10.00</td>
      
<td><span title="购买商品并填写数量" id="Shopping2" onclick="MadeText();">放入购物车</span></td>
      
<td>0</td>
    
</tr>
    
<tr>
      
<td>足球</td>
      
<td>300.00</td>
      
<td><span title="购买商品并填写数量" id="Shopping3" onclick="MadeText();">放入购物车</span></td>
      
<td>0</td>
    
</tr>
  
</table>
</div>
<div id="Test">
<div id="Info">总计:<strong><span id="total" style="color:#FF0000; font-size:36px">0</span></strong></div>
<div id="btnAdd"><input name="" type="button" value="提交订单" onclick="AddOrder();" /></div>
</div>
</body>
</html>

 

 

<script type="text/javascript">
  
var isClick = false;
  
var curObj = null;  //当前点击的对象
  var newValue = "";
  
var txt  = "";
  
  
function Edit(obj)
  {
    
if(!isClick)
    {
      curObj 
= obj;
      txt 
= obj.innerText;
      obj.innerHTML 
= "<input type='text' size='2' value=" + txt + "  />";
      isClick 
= true;
    }
else
    {
      newValue 
= curObj.firstChild.value;
      curObj.innerHTML 
= newValue;
      isClick 
= false;
   }
}
</script>
<div id="d" ondblclick="Edit(this);">20</div>