前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用js+cookie实现商城的购物车功能

用js+cookie实现商城的购物车功能

作者头像
用户3055976
发布2018-09-12 14:58:02
3.6K0
发布2018-09-12 14:58:02
举报
文章被收录于专栏:知道一点点

页面上的添加功能主要就是两个按钮

<input name="buy" type="image" alt="第一个商品" src="images/buy.gif" align="middle" onclick="getInfo();" style="float:left;" /> <h1>商品1</h1><br/> <input type="image" alt="第二个商品" src="images/buy.gif" align="middle" onclick='common.intoCart(88,"test",60,50,1);' style="float:left;" /> <h1>商品2</h1>

购物车页面

//页面加载时执行 window.onload = function() { //更新购物车 getCartInfo(); }; /* * 删除左右两端的空格 */ function trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ''); }

/* * 验证是否是数字 */ function isNum(str){ return str.match(/\D/)==null; } //设置商品数量 function setQuantity(goods_id,obj){ //判断输入的购买数量是否合法 var goods_count=trim(obj.value); var next_obj=obj.nextSibling; var old_goods_count=trim(next_obj.value); //判断输入的购买数量是否合法 if(isNum(goods_count) && goods_count!= old_goods_count && goods_count!=0) { //更改商品的购买数量 common.updateQuantity(goods_id,goods_count); }else{ //重置商品的购买数量 obj.value = old_goods_count; } } //取得购物车信息 function getCartInfo(){ var str=""; var amount=0; var _div = document.getElementById("goods_info"); //从Cookie中取出商品信息列表,并将其转化为数组 var arr = common.convertArray(); //如果数组是否为空 if(arr != "" && arr != null && arr != "null") { //将商品信息从数组中循环取出 for(i=0;i < arr.length;i++) { str+='<ul><li class="li_name">'+arr[i][1]+ '</li><li class="li_pice">'+arr[i][2]+ '</li><li class="li_pice">'+arr[i][3]+ '</li><li class="li_pice"><input type="text" value="'+arr[i][4]+ '" onBlur="setQuantity('+arr[i][0]+ ',this);" /><INPUT type=hidden value='+arr[i][4]+ '></li><li class="li_del"><input type="image" src="images/trash.gif" onclick="common.reMoveOne('+arr[i][0]+ ');" /></li></ul>'; //计算商品总额 amount+=arr[i][3]*arr[i][4]; }

//替换页面 _div.innerHTML = str; }else{ str = '<ul><li class="li_no">您还没有挑选商品</li></ul>'; //替换页面 _div.innerHTML = str; } //重置总金额 document.getElementById("amount").innerText = amount; } </script>

js页面太多了

demo地址

链接:http://pan.baidu.com/s/1cD1cbO 密码:9prl

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-04-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档