当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > JS实现购物车中常用的计数总价效果

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实现购物车中常用的计数总价效果 进行本实例源码下载