关于javaScript问题购物车的实现

发布网友发布时间：2022-04-23 16:38

共4个回答

懂视网时间：2022-05-16 03:22

这篇文章主要为大家分享了js简易版的购物车，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js购物车功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }

 li {
 list-style: none;
 }

 li {
 float: left;
 width: 200px;
 border: 1px #000 solid;
 margin: 10px;
 }

 li img {
 width: 200px;
 }

 p {
 height: 20px;
 border-bottom: 1px #333 dashed;
 }

 #bus {
 width: 600px;
 border: 1px #000 solid;
 height: 300px;
 clear: both;
 }

 .box1 {
 float: left;
 width: 200px;
 }

 .box2 {
 float: left;
 width: 200px;
 }

 .box3 {
 float: left;
 width: 200px;
 }

 #allMoney {
 float: right;
 }
 </style>
 <script>
 window.onload = function() {
 var oList = document.getElementById('list');
 var aLi = oList.getElementsByTagName('li');
 var oBus = document.getElementById('bus');

 var obj = {};
 var iNum = 0;
 var allMoney = 0;

 for (var i = 0; i < aLi.length; i++) {
  aLi[i].ondragstart = function(ev) {
  //点击拖拽元素的时候，就设置数据，以后放到购物车的时候数据就可以传过去了
  var ev = ev || window.event;
  var aP = this.getElementsByTagName('p');
  ev.dataTransfer.setData('title', aP[0].innerHTML);
  ev.dataTransfer.setData('price', aP[1].innerHTML);
  ev.dataTransfer.setDragImage(this, 0, 0);
  }
 }

 oBus.ondragover = function(ev) {
  //阻止鼠标默认事件
  var ev = ev || event;
  ev.preventDefault();
 };
 oBus.ondrop = function(ev) {
  var ev = ev || event;
  var title = ev.dataTransfer.getData('title');
  var price = ev.dataTransfer.getData('price'); 

  if(!obj[title]){

  var oP = document.createElement('p');
  var oSpan = document.createElement('span');
  oSpan.className = 'box1';
  oSpan.innerHTML = 1;
  oP.appendChild(oSpan);

  var oSpan = document.createElement('span');
  oSpan.className = 'box2';
  oSpan.innerHTML = title;
  oP.appendChild(oSpan);

  var oSpan = document.createElement('span');
  oSpan.className = 'box3';
  oSpan.innerHTML = price;
  oP.appendChild(oSpan);

  oBus.appendChild(oP);

  obj[title] = 1;
  }else{
  var box1 = document.getElementsByClassName('box1');
  var box2 = document.getElementsByClassName('box2');
  for(var i=0;i<box2.length;i++){
  if(box2[i].innerHTML == title){
  box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
  };
  };

  };
  //总价
  if(!allMoney){
  allMoney = document.createElement('p');
  allMoney.id = 'allMoney';
  }
  iNum += parseInt(price);
  allMoney.innerHTML = '￥'+iNum;
  oBus.appendChild(allMoney);
 };
 };
 </script>
 </head>

 <body>
 <ul id="list">
 <li draggable="true">
 <img src="img/img1.jpg" />
 <p>javascript语言精粹</p>
 <p>40￥</p>
 </li>
 <li draggable="true">
 <img src="img/img2.jpg" />
 <p>javascript权威指南</p>
 <p>120￥</p>
 </li>
 <li draggable="true">
 <img src="img/img3.jpg" />
 <p>精通javascript</p>
 <p>35￥</p>
 </li>
 <li draggable="true">
 <img src="img/img4.jpg" />
 <p>DOM编程艺术</p>
 <p>45￥</p>
 </ul>
 <p id="bus"></p>
 </body>

</html>

热心网友时间：2022-05-16 00:30

关于只有最后一个文本框能触发checknum方法的问题：
其实这里有个逻辑错误，主要是<%=i%>中的i是多少的问题。从你贴出来的代码看，你是不是连JS代码也循环输出了吧，也就是有几条购物信息，就会生成几个checknum方法，在JS里，同函数名的方法如果多次定义，则只有最后一个定义的方法有效果，那最后一个checknum方法里的<%=i%>实际就只指代最后一个文本框了。结果就是只有最后一个文本框有效果。
其实楼主只需要循环输出表格，JS代码只用一个就行了，只要在文本框触发JS动作时，把<%i%>作为参数传进JS方法就行了，例如，你可以这么写：

...
<td width="58" height="30"><input name="num<%=i%>" size="5" type="text" value="<%=goodsitem.number%>" onBlur="checknum(this.form,<%=i%>)"></td>
...
把JS方法放到循环外面，这么写：
function checknum(myform,i){
var inp = myform['num'+i];
if(isNaN(inp.value) || inp.value.indexOf('.')!=-1){
alert("请不要输入非法字符！");inp.focus();return;}//判断是否为数字值
if(inp.value><%=leave%>){alert("请输入小于现有库存（"+<%=leave%>+"）的数量！");inp.focus();return;}
if(inp.value==0){
alert("请输入大于1的整数！");inp.focus();return;}
if(inp.value==""){
alert("请输入修改的数量！");inp.focus();return;}
myform.submit();
}

关于数字修改后触发checknum方法的问题：
楼主的checknum方法最后是要提交表单的，所以如果用键盘事件，那每一次输入一个字符或删除一个字符，都会触发表单提交动作，这应该不是楼主要的结果。字符修改后触发JS方法有专门的事件处理方法onchange。楼主可以吧onblur换成onchange试试。

热心网友时间：2022-05-16 01:48

"我想要的是每一个商品后面的“数量”文本框的数字修改后都运行javaScript"
在“数量”文本框中加入onKeyUp事件

热心网友时间：2022-05-16 03:23

全部栏目

关于javaScript问题 购物车的实现

关于javaScript问题购物车的实现