好久没有写博客园了,很多知识没有记录下来;可惜;

这几天在开发微信,也写了一个订餐平台的微网站,里面需要写一个购物车;

这里主要是把商品的部分信息以json格式保存在sessionstorage中,还有商店信息也是;

以json格式保存有什么好处呢,轻量级的传输,大概是这样吧!另外,如果我们把商品信息分开存储,就会导致有多条的sessionstorage项,那以后实现在两家商店同时购物的话,就不可能区分每家商店的商品了;

 

如果代码是自己写的,就有版权,这么说、对吧,是在软件工程师书上看到的;

不多说,我喜欢的是上代码;

 

在点击商品的时候,我们就把商品加入购物车,这个功能:其中利用了JSON.stringfy()和JSON.parse()进行转换

 1 function addgood(id, price, name) {//在界面渲染的时候已经把商品信息参数整合到自己的函数中了
 2         var contact = new Object();//单个商品的对象,暂时介质
 3         var goodobj = new Object();//商品对象
 4         var memberfilter = new Array();//商品信息
 5         memberfilter[0] = "id";
 6         memberfilter[1] = "name";
 7         memberfilter[2] = "sum";
 8         memberfilter[3] = "price";
 9         if (typeof (sessionStorage.good) == "undefined") {//此时没有商品
10             contact.id = parseInt(id);
11             contact.name = name;
12             contact.sum = 1;
13             contact.price = parseInt(price);
14             var good = new Array();
15             var jsonText = JSON.stringify(contact, memberfilter);
16             good[0] = JSON.parse(jsonText);
17             sessionStorage.good = JSON.stringify(good, memberfilter);
18 
19         }
20         else {//有商品,要判断商品在本地是否有存储,有的话sum+1
21             //取数据
22             goodobj = JSON.parse(sessionStorage.good);
23             var con = 0;
24             for (var i = 0; i < goodobj.length; i++) {
25                 if (goodobj[i].id == id) {
26                     goodobj[i].sum = 1 + parseInt(goodobj[i].sum);
27                     sessionStorage.good= JSON.stringify(goodobj, memberfilter);
28                     con++;
29                     break;
30                 }
31             }
32             if (con == 0) {//没有该商品,新建一个进去
33                 contact.id = parseInt(id);
34                 contact.name = name;
35                 contact.sum = 1;
36                 contact.price = parseInt(price);
37 
38                 var jsonText = JSON.stringify(contact, memberfilter);
39                 var goolen = goodobj.length;
40                 goodobj[goolen] = JSON.parse(jsonText);
41                 sessionStorage.good= JSON.stringify(goodobj, memberfilter);
42                
43             }
44 
45         }
46     }

这是本地存储的数据格式:

  

****************************************************************************************************************

***购物车还有加减功能,附上最基本的功能:

购物车页面是另外的,这里重新定义;

1 var goodobj = new Object();
2 var money = 0;
3 var memberfilter = new Array();
4 memberfilter[0] = "id";
5 memberfilter[1] = "name";
6 memberfilter[2] = "sum";
7 memberfilter[3] = "price";

1、商品数量加一:

 1 function add(id) {//此方法是带商品id的
 2     for (var i = 0; i < goodobj.length; i++) {//简单的遍历,没有优化
 3         if (goodobj[i].id == id) {
 4             goodobj[i].sum = 1 + parseInt(goodobj[i].sum);
 5             sessionStorage.good= JSON.stringify(goodobj, memberfilter);
 6             money = parseInt(money) + parseInt(goodobj[i].price);//总价
 7             break;
 8         }
 9     }
10 };

2、商品数量减一:

 1 function cut(id) {
 2     for (var i = 0; i < goodobj.length; i++) {
 3         if (goodobj[i].id == id) {
 4             goodobj[i].sum = parseInt(goodobj[i].sum) - 1;
 5             money = parseInt(money) - parseInt(goodobj[i].price);
 6             if (goodobj[i].sum == 0) {
 7                 goodobj = goodobj.del(i);//删除此商品
 8             }
 9             sessionStorage.good= JSON.stringify(goodobj, memberfilter);
10             break;
11         }
12     }
13 };
View Code

3、删除商品的时候,也就是对对象数组进行操作,那么删除一个对象,就要刷新一次索引,不然某array[i]可能就是undefined;这个时候就会造成json错误;

删除商品使用的函数使用了slice()和concat();

w3school中解释:

slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分;

concat() 方法用于连接两个或多个数组,该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

prototype 属性使您有能力向对象添加属性和方法。

如下是代码:

1 Array.prototype.del = function (n) {
2     if (n < 0) 
3         return this;
4     else
5         return this.slice(0, n).concat(this.slice(n + 1, this.length));
6     }//本代码有参考网上的代码,出处不记得了,真是不好意思
View Code

 

最后也想解释一下为什么用这个格式的json,我用ajax技术把数据传送到后端,定义了一个函数解析这个格式的json,中间利用一个类暂时存储其中的信息,最终转换为dataset,这样数据就可以方便使用了

 

我希望看到这篇文章的伙伴们都可以留下您宝贵的意见,我希望加以改进函数!!谢谢交流

最近在开发微信,我也希望有人交流

作者:威华

posted @ 2014-05-14 20:28 雾里小梅花 阅读(2784) 评论(23) 推荐(1) 编辑
摘要: 最近在接触微信开发,也有在看php的代码,不过最后还是使用c#语言了;后台新建了index.ashx文件,这样速度比较快;首先顶部引用了using System.IO;using System.Xml;一个是为了实现接收xml文件流,一个是为了后面对xml文件的处理;public class index : IHttpHandler { private readonly string Token = "xxxx";//与微信公众账号后台的Token设置保持一致,区分大小写。 public void ProcessRequest (HttpContext context) { 阅读全文
posted @ 2014-03-24 22:47 雾里小梅花 阅读(645) 评论(2) 推荐(2) 编辑
摘要: JS 动态修改 input 的 type 属性调用: $(“#uname”);可选参数class为获取焦点时input的class,但是清除密码的时候出了一个问题,用户输入的密码应该是 ”*****”,这里需要将input 的type 属性由 text 换成 password ,如果用户没有输入密码,鼠标失去焦点的时候 type换回 text ,value 值为 “密码”。[javascript]view plaincopy$("#pswd").focus(function(){$(this).attr('type','password'); 阅读全文
posted @ 2014-02-22 22:03 雾里小梅花 阅读(434) 评论(0) 推荐(0) 编辑
摘要: function getbrowser() { var OsObject = ""; if (navigator.userAgent.indexOf("MSIE") > 0) { return "MSIE"; } if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { return "Firefox"; } if (isSafari = ... 阅读全文
posted @ 2014-02-20 15:09 雾里小梅花 阅读(141) 评论(0) 推荐(0) 编辑
摘要: attr为属性,即该元素除style属性外的所有属性都可以用attr表示。css为样式,即style里面的内容。toggle()方法用于模拟鼠标连续单击事件,用于切换效果。toggleclass()重复切换类名。triggle()方法用于模拟操作。例如用户必须通过单击按钮才能出发click事件,但是有时需要通过模拟用户操作, 来达到单击的效果,例如用户进入页面后,就触发click事件,而不需要用户去主动单击看,就可以用triggle()方法。例如页面一加载进来就触发单 击操作就用$("#btn").triggle("click"),也可以简化为$(&qu 阅读全文
posted @ 2014-02-19 21:48 雾里小梅花 阅读(1743) 评论(0) 推荐(0) 编辑
摘要: $(document).ready(function() { //x上限,y下限 var x = 12; var y = 0; var rand = parseInt(Math.random() * (x - y + 1) + y); $("#b").html("").append("" + rand + ""); })从1开始 至 任意值 parseInt(Math.random()*上限+1); 2. 从任意值开始 至 任意值 parseInt(Math.random()*(上限-下限+1)+下限); rand 阅读全文
posted @ 2014-02-18 15:57 雾里小梅花 阅读(490) 评论(0) 推荐(0) 编辑
摘要: CSS控制页面样式四种方法:1、行内方式行内方式是4种样式中最直接最简单的一种,直接对HTML标签适用style=”",例如:虽然这种方法比较直接,在制作页面的时候需要为很多的标签设置style属性,所以会导致HTML页面不够纯净,文件体积过大,不利于搜索蜘蛛爬行,从而导致后期维护成本高。2、内嵌方式内嵌方式就是将CSS代码写在之间,并且用进行声明,例如:3、链接方式链接方式是使用频率最高,最实用的方式,只需要在之间加上,就可以了,这种方式将HTML文件和CSS文件彻底分成两个或者多个文件,实现了页面框架HTML代码与美工CSS代码的完全分离,使得前期制作和后期维护都十分方便,并且如 阅读全文
posted @ 2014-01-19 23:52 雾里小梅花 阅读(5509) 评论(0) 推荐(0) 编辑
摘要: jquery停止text输入,光标停止效果:写在key事件里 var num = $("#id").val().substr(0, 6); $("#id").val(num);添加样式:addclass("css");移除样式:remove("css");元素获取:一、获取父级元素1、 parent():获取指定元素的所有父级元素二、获取同级元素:1、next():获取指定元素的下一个同级元素2、nextAll():获取指定元素后边的所有同级元素3、andSelf():获取指定元素后边的所有同级元素,之后加上指定的 阅读全文
posted @ 2014-01-19 23:16 雾里小梅花 阅读(198) 评论(0) 推荐(0) 编辑
摘要: input/textText 对象事件 onBlur 当 text field失去聚焦的时候执行一些代码 onChange 当 text field失去聚焦并且它的值发生变动的时候执行一些代码 onClick 当用户在 text field中用鼠标左键点击时执行一些代码 onFocus 当 text field获得聚焦的时候执行一些代码 onKeyDown 在 text field中有键按住的时候执行一些代码 onKeyUp 当 text field 中按键释放则执行一些代码 onSelect 当 text field里当前选中的内容发生变化时执行一些代码 onSelectStart 当 te 阅读全文
posted @ 2014-01-18 19:59 雾里小梅花 阅读(264) 评论(0) 推荐(0) 编辑
摘要: 输入浮点型:$("#id").keyup(function () { $(this).val($(this).val().replace(/[^0-9.]/g, '')); $(this).val($(this).val().replace(/^\./g, '')); //第一个为数字而不是. $(this).val($(this).val().replace(/\.{2,}/g, '.')); //只有出现一个.而没有多个. $(this).val($(th... 阅读全文
posted @ 2014-01-18 19:55 雾里小梅花 阅读(126) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示