JS实现购物车中常用的计数总价效果

2012/11/7 11:08:14作者：佚名来源：网络

移动端

【实例名称】

JS实现购物车中常用的计数总价效果

【实例描述】

在一些购物网站中，用户需要先将商品放到虚拟的购物车中，付款时系统会自动计算购物车中商品的总价值。本例学习制作一个简单的购物车。

【实例代码】

 
<html>
<head>
<title>小小购物车-学无忧（www.xue51.com）</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
var messages = new Array(11); //价格数组
messages[0] = "";
messages[1] = "12.30元";
messages[2] = "13.00元";    
messages[3] = "14.20元";
messages[4] = "15.00元";
messages[5] = "21.30元";
messages[6] = "22.70元";
messages[7] = "23.20元";
messages[8] = "24.40元";
messages[9] = "31.80元";
messages[10] = "32.60元";
function numChange()
{
 with (document.form1)
 {
  var numIndex = bookNum.selectedIndex;
//判断用户选择的本数
  bookPrice.value = messages[numIndex];
//获取价格
  bookTotal.value =  messages[numIndex].slice(0,-1)*numIndex+"元";
//计算总价
 }
}
</script>
<title>无标题文档-学无忧（www.xue51.com）</title>
</head>
<body>
<form name="form1" method="post" action="">
 数量 <select name="bookNum" onChange="numChange()">
    <option value="0">购买数量</option>
    <option>1本</option>
    <option>2本</option>
    <option>3本</option>
    <option>4本</option>
    <option>5本</option>
    <option>6本</option>
    <option>7本</option>
    <option>8本</option>
    <option>9本</option>
    <option>10本</option>
  </select>
 单价
 <input name="bookPrice"   readonly />　
 总价
  <input name="bookTotal" type="text" id="bookTotal" />
</form>
</body>
</html>
 
 
【运行效果】

购物篮中常用的计数总价效果运行效果

【难点剖析】

本例中的“单价”输入框是只读的．在input标签中使用“readonly”控制文本框是否只读。用户选择下拉框，系统根据用户的选择自动计算本商品的单价．这些单价都保存在数组“messages”中。计算总价时使用数组对象的“slice”方法，此方法也返回一个数组，该数组是原数组的子集，始于参数一，结束于参数二。

【源码下载】

为了JS代码的准确性，请点击：JS实现购物车中常用的计数总价效果进行本实例源码下载

标签：