在实际的项目中用到了leancloud三方服务器存储，实现的简单的购物调查实验，觉得还不错，记录一下
主页，欢迎页
1.cookie缓存技术，为首次进入的用户随机生成id，保证同一个用户每次进入的身份保持一致，增加实验调查的准确性，
2.俩种实验场景，使实验更加丰富有趣，调查结果多样性，数据可靠
3.将用户信息用leancloud存入服务器，记录数据
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no" /> | |
| <meta name="format-detection" content="telephone=no"> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="blank" /> | |
| <title>模拟购物实验</title> | |
| <link type="text/css" rel="stylesheet" href="//image.buslive.cn/awjdc_1222/css/base.css"> | |
| <link type="text/css" rel="stylesheet" href="//image.buslive.cn/awjdc_1222/css/index.css"> | |
| <script type="text/javascript" src="//image.buslive.cn/awjdc_1222/js/fontSize.js"></script> | |
| <script type="text/javascript" src="//image.buslive.cn/awjdc_1222/js/jquery-1.10.2.min.js"></script> | |
| <script src="//image.buslive.cn/ynyd/js/av-mini-0.6.4.js"></script> | |
| <script src="//image.buslive.cn/ynyd/js/av-core-mini-0.6.4.js"></script> | |
| </head> | |
| <body> | |
| <div class="title">模拟购物实验</div> | |
| <div class="desc"> | |
| <p> 亲爱的朋友，您好！非常感谢您抽出宝贵的时间来参与我们的模拟购物实验，本次实验将花费大约3-5分钟的时间。</p> | |
| </div> | |
| <div class="ruleHead"> | |
| <p><img src="//image.buslive.cn/awjdc_1222/images/logo.png" alt=""><span>实验说明</span></p> | |
| </div> | |
| <div class="desc"> | |
| <p>1.<em>购买产品前</em>,请您仔细阅读购买任务内容，当您确定已经完全清晰需要进行的购买任务后，点击“开始购物”按钮就可以开始购买啦 | |
| </p> | |
| </div> | |
| <div class="desc"> | |
| <p>2.<em>购买过程中</em>,请您认真浏览购买界面的产品，并将您中意的产品放入购物车内，点击“结算”按钮则视为购买成功 | |
| </p> | |
| </div> | |
| <div class="desc"> | |
| <p>3.<em>购买任务结束后</em>,请您帮助我们回答四个问题，点击“提交”按钮则本次模拟购物实验即为结束。 | |
| </p> | |
| </div> | |
| <div id="text"></div> | |
| <div class="nobuy buyBtnToo"> | |
| <a href="javascript:void(0)">开始购物<em class="times"></em></a> | |
| </div> | |
| </body> | |
| <script> | |
| //设定倒数秒数 | |
| var t = 10; | |
| function showTime(){ | |
| $(".times").html(t); | |
| if(t==0){ | |
| $(".nobuy").addClass("toBuyBtn"); | |
| $(".nobuy a").css("background-color","#ff5a11"); | |
| $(".times").html(""); | |
| clearInterval(timesInterval); | |
| } | |
| t -= 1; | |
| } | |
| timesInterval = setInterval("showTime()",1000); | |
| //随机情景 | |
| function mrc() { | |
| butong_net = [ | |
| {'type':1,'value':"<h3>购物情景:</h3> 部门打算举办一个小型的年会party，您作为部门的采购人员负责购买年会幸运奖奖品。部门有男、女同事不等，<em>您需要购买至少5个不同的鼠标</em>作为本次活动的幸运奖品，具体购买内容则由您自己决定。"}, | |
| {'type':2,'value':"<h3>购物情景:</h3> 为了丰富同学们的课余生活，班级成立了图书角，您作为班长负责购买一些图书，班级里有男生、女生不等，<em>要求至少购买5本不同的图书</em>，具体购买内容则由您自己决定。"} | |
| ]; | |
| butong_net2 = Math.floor(Math.random() * butong_net.length); | |
| $("#text").html(butong_net[butong_net2].value); | |
| } | |
| mrc(); | |
| function skip(){ | |
| if(butong_net[butong_net2].type==1){ | |
| location.href="mouse.html"; | |
| }else{ | |
| location.href="book.html"; | |
| } | |
| } | |
| </script> | |
| <script> | |
| //存 取cookie | |
| function getCookie(name) { | |
| var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); | |
| if(arr=document.cookie.match(reg)) | |
| return unescape(arr[2]); | |
| else | |
| return null; | |
| } | |
| //设置cookie | |
| function setCookie(name,value) { | |
| var Days = 30; | |
| var exp = new Date(); | |
| exp.setTime(exp.getTime() + Days*24*60*60*1000); | |
| document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); | |
| } | |
| $(function(){ | |
| var user_num = getCookie('user_num'); | |
| if (!user_num) { | |
| user_num = Math.random(); | |
| setCookie('user_num', user_num); | |
| } | |
| //存储数据 | |
| $(document).on("click",".toBuyBtn a",function(){ | |
| var user_num_data = getCookie('user_num'); | |
| var cut_user_num_data = (user_num_data.substring(2)); | |
| AV.initialize('WVcpwOApF0G5SMl5kr2dLfhW-gzGzoHsz', 'pB6JnQf7i8l4RkShabUT4bWl'); | |
| var homePage = AV.Object.extend('homePage'); | |
| var testObject = new homePage(); | |
| testObject.save({ | |
| user_num : cut_user_num_data | |
| }, { | |
| success: function(object) { | |
| skip(); | |
| } | |
| }, function(error) { | |
| alert(error); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| var _hmt = _hmt || []; | |
| (function() { | |
| var hm = document.createElement("script"); | |
| hm.src = "//hm.baidu.com/hm.js?818abfb5827257869fc349f7a2be4c29"; | |
| var s = document.getElementsByTagName("script")[0]; | |
| s.parentNode.insertBefore(hm, s); | |
| })(); | |
| </script> | |
| </html> |
实验调查页面：
实验模型1：
1.获取首页生产cookie来匹配用户身份，保持用户身份一致
2.模拟简单的购物车加入，移除功能
3.实验设置俩种模式，热门商品和普通商品，从每种二十个商品中随机抽取0-8中不等，随机生成商品列表，增加数据可靠性
4.将用户购买的商品数组信息与cookie存储到服务器
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no" /> | |
| <meta name="format-detection" content="telephone=no"> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="blank" /> | |
| <title>书籍</title> | |
| <link type="text/css" rel="stylesheet" href="//image.buslive.cn/awjdc_1222/css/base.css"> | |
| <link type="text/css" rel="stylesheet" href="//image.buslive.cn/awjdc_1222/css/mouse.css"> | |
| <script type="text/javascript" src="//image.buslive.cn/awjdc_1222/js/fontSize.js"></script> | |
| <script type="text/javascript" src="//image.buslive.cn/awjdc_1222/js/jquery-1.10.2.min.js"></script> | |
| <script type="text/javascript" src="//image.buslive.cn/awjdc_1222/js/function.js"></script> | |
| <script src="//image.buslive.cn/ynyd/js/av-mini-0.6.4.js"></script> | |
| <script src="//image.buslive.cn/ynyd/js/av-core-mini-0.6.4.js"></script> | |
| </head> | |
| <body> | |
| <div class="listBox" style="height:9.5rem;overflow:auto;"> | |
| <!-- <div class="banner"> | |
| <ul class="swiper-wrapper"> | |
| <li class="swiper-slide"><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book_swiper/b1.jpg"></a></li> | |
| <li class="swiper-slide"><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book_swiper/b2.jpg"></a></li> | |
| <li class="swiper-slide"><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book_swiper/b3.jpg"></a></li> | |
| <li class="swiper-slide"><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book_swiper/b4.jpg"></a></li> | |
| <li class="swiper-slide"><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book_swiper/b5.jpg"></a></li> | |
| </ul> | |
| <div class="bannerSum"></div> | |
| </div> --> | |
| <div class="hotList"> | |
| <h3>热门推荐</h3> | |
| <ul></ul> | |
| </div> | |
| <div class="commonList"> | |
| <h3>商品列表</h3> | |
| <ul> | |
| <li id="img_1"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b1.jpg"></a></aside> | |
| <article> | |
| <h6>一桩事先张扬的凶杀案</h6> | |
| <p>￥<em>21.30</em></p> | |
| <p>130000<em>条评论</em></p> | |
| <p>96%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_2"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b2.jpg"></a></aside> | |
| <article> | |
| <h6>奇迹</h6> | |
| <p>￥<em>23.20</em></p> | |
| <p>110000<em>条评论</em></p> | |
| <p>95%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_3"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b3.jpg"></a></aside> | |
| <article> | |
| <h6>湖畔</h6> | |
| <p>￥<em>27.20</em></p> | |
| <p>71000<em>条评论</em></p> | |
| <p>96%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_4"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b4.jpg"></a></aside> | |
| <article> | |
| <h6>酷酷的代课老师</h6> | |
| <p>￥<em>23.30</em></p> | |
| <p>71000<em>条评论</em></p> | |
| <p>97%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_5"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b5.jpg"></a></aside> | |
| <article> | |
| <h6>图书光奇谈</h6> | |
| <p>￥<em>22.10</em></p> | |
| <p>40000<em>条评论</em></p> | |
| <p>94%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_6"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b6.jpg"></a></aside> | |
| <article> | |
| <h6>清道夫</h6> | |
| <p>￥<em>24.80</em></p> | |
| <p>18000<em>条评论</em></p> | |
| <p>95%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_7"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b7.jpg"></a></aside> | |
| <article> | |
| <h6>余罪:我的刑侦笔记</h6> | |
| <p>￥<em>22.30</em></p> | |
| <p>16000<em>条评论</em></p> | |
| <p>95%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_8"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b8.jpg"></a></aside> | |
| <article> | |
| <h6>别相信任何人</h6> | |
| <p>￥<em>21.80</em></p> | |
| <p>11000<em>条评论</em></p> | |
| <p>96%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_9"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b9.jpg"></a></aside> | |
| <article> | |
| <h6>新参者</h6> | |
| <p>￥<em>33.60</em></p> | |
| <p>8500<em>条评论</em></p> | |
| <p>97%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_10"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b10.jpg"></a></aside> | |
| <article> | |
| <h6>红手指</h6> | |
| <p>￥<em>33.60</em></p> | |
| <p>8500<em>条评论</em></p> | |
| <p>96%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_11"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b11.jpg"></a></aside> | |
| <article> | |
| <h6>布谷鸟的呼唤</h6> | |
| <p>￥<em>40.50</em></p> | |
| <p>3400<em>条评论</em></p> | |
| <p>97%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_12"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b12.jpg"></a></aside> | |
| <article> | |
| <h6>离别曲</h6> | |
| <p>￥<em>40.60</em></p> | |
| <p>3200<em>条评论</em></p> | |
| <p>99%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_13"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b13.jpg"></a></aside> | |
| <article> | |
| <h6>盗墓笔记2</h6> | |
| <p>￥<em>23.30</em></p> | |
| <p>2800<em>条评论</em></p> | |
| <p>98%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_14"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b14.jpg"></a></aside> | |
| <article> | |
| <h6>盗墓笔记7</h6> | |
| <p>￥<em>23.60</em></p> | |
| <p>2700<em>条评论</em></p> | |
| <p>91%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_15"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b15.jpg"></a></aside> | |
| <article> | |
| <h6>单恋</h6> | |
| <p>￥<em>22.10</em></p> | |
| <p>2300<em>条评论</em></p> | |
| <p>92%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_16"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b16.jpg"></a></aside> | |
| <article> | |
| <h6>犯罪心理档案</h6> | |
| <p>￥<em>39.90</em></p> | |
| <p>1200<em>条评论</em></p> | |
| <p>89%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_17"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b17.jpg"></a></aside> | |
| <article> | |
| <h6>奇风岁月</h6> | |
| <p>￥<em>30.60</em></p> | |
| <p>1200<em>条评论</em></p> | |
| <p>98%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_18"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b18.jpg"></a></aside> | |
| <article> | |
| <h6>心里大师:罪爱</h6> | |
| <p>￥<em>23.80</em></p> | |
| <p>500<em>条评论</em></p> | |
| <p>99%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_19"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b19.jpg"></a></aside> | |
| <article> | |
| <h6>送雏菊的姑娘</h6> | |
| <p>￥<em>19.50</em></p> | |
| <p>100<em>条评论</em></p> | |
| <p>98%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_20"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/book/b20.jpg"/></a></aside> | |
| <article> | |
| <h6>法医研究所</h6> | |
| <p>￥<em>20.00</em></p> | |
| <p>100<em>条评论</em></p> | |
| <p>90%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| </ul> | |
| <a href="javascript:void(0)" class="more" style="display:inline-block;width:6.4rem;height:0.6rem;line-height:0.6rem;text-align:center;font-size:0.24rem;color:#666666;">加载更多</a> | |
| </div> | |
| </div> | |
| <div class="noyangshi buyBtnToo"> | |
| <a href="javascript:void(0)">购物车结算(<em>0</em>)</a> | |
| </div> | |
| <div class="endPop"> | |
| <div class="popMain"> | |
| <p>完成！</p> | |
| <p>感谢您的参与,谢谢！</p> | |
| <a href="javascript:void(0)" class="backHomePage">返回首页</a> | |
| </div> | |
| </div> | |
| <script> | |
| function getCookie(name) { | |
| var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); | |
| if(arr=document.cookie.match(reg)) | |
| return unescape(arr[2]); | |
| else | |
| return null; | |
| } | |
| function setCookie(name,value) | |
| { | |
| var Days = 30; | |
| var exp = new Date(); | |
| exp.setTime(exp.getTime() + Days*24*60*60*1000); | |
| document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); | |
| } | |
| var user_num = getCookie('user_num'); | |
| if (!user_num) { | |
| user_num = Math.random(); | |
| setCookie('user_num', user_num); | |
| } | |
| //随机数 | |
| var sj_number=Math.random(); | |
| //随机取出 | |
| function getArrayItems(arr, num) { | |
| var temp_array = new Array(); | |
| for (var index in arr) { | |
| temp_array.push(arr[index]); | |
| } | |
| var return_array = new Array(); | |
| for (var i = 0; i<num; i++) { | |
| if (temp_array.length>0) { | |
| var arrIndex = Math.floor(Math.random()*temp_array.length); | |
| return_array[i] = temp_array[arrIndex]; | |
| temp_array.splice(arrIndex, 1); | |
| } else { | |
| break; | |
| } | |
| } | |
| return return_array; | |
| } | |
| //高分主流 | |
| var to_img1=[{ | |
| "_id":1, | |
| "name":"消失的女孩", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_one/1.jpg", | |
| "prize":20.00, | |
| "comm":86000, | |
| "rate":97, | |
| }, | |
| { | |
| "_id":2, | |
| "name":"嫌疑人x的献身", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_one/2.jpg", | |
| "prize":26.30, | |
| "comm":71000, | |
| "rate":96, | |
| }, | |
| { | |
| "_id":3, | |
| "name":"白夜行", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_one/3.jpg", | |
| "prize":23.70, | |
| "comm":71000, | |
| "rate":95, | |
| }, | |
| { | |
| "_id":4, | |
| "name":"余罪：我的刑侦笔记2", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_one/4.jpg", | |
| "prize":26.50, | |
| "comm":16000, | |
| "rate":96, | |
| }, | |
| { | |
| "_id":5, | |
| "name":"余罪：我的刑侦笔记5", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_one/5.jpg", | |
| "prize":29.40, | |
| "comm":16000, | |
| "rate":95, | |
| }, | |
| { | |
| "_id":6, | |
| "name":"藏海花", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_one/6.jpg", | |
| "prize":23.90, | |
| "comm":10000, | |
| "rate":97, | |
| }, | |
| { | |
| "_id":7, | |
| "name":"虚无的十字架", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_one/7.jpg", | |
| "prize":27.40, | |
| "comm":9600, | |
| "rate":98, | |
| }, | |
| { | |
| "_id":8, | |
| "name":"丹·布朗·地狱", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_one/8.jpg", | |
| "prize":32.20, | |
| "comm":8400, | |
| "rate":95, | |
| }, | |
| { | |
| "_id":9, | |
| "name":"清明上河图密码2", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_one/9.jpg", | |
| "prize":34.70, | |
| "comm":7200, | |
| "rate":96, | |
| }, | |
| { | |
| "_id":10, | |
| "name":"清明上河图密码3", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_one/10.jpg", | |
| "prize":38.70, | |
| "comm":7200, | |
| "rate":99, | |
| } | |
| ]; | |
| //高分利基 | |
| var tt_img1 = [{ | |
| "_id":11, | |
| "name":"福尔摩斯探案大全集", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_two/1.jpg", | |
| "prize":17.40, | |
| "comm":4600, | |
| "rate":95, | |
| }, | |
| { | |
| "_id":12, | |
| "name":"消失的爱人", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_two/2.jpg", | |
| "prize":31.50, | |
| "comm":3800, | |
| "rate":94, | |
| }, | |
| { | |
| "_id":13, | |
| "name":"十宗罪", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_two/3.jpg", | |
| "prize":20.60, | |
| "comm":3400, | |
| "rate":98, | |
| }, | |
| { | |
| "_id":14, | |
| "name":"盗墓笔记4", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_two/4.jpg", | |
| "prize":23.30, | |
| "comm":2400, | |
| "rate":96, | |
| }, | |
| { | |
| "_id":15, | |
| "name":"海边的卡夫卡", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_two/5.jpg", | |
| "prize":27.80, | |
| "comm":2300, | |
| "rate":96, | |
| }, | |
| { | |
| "_id":16, | |
| "name":"告白", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_two/6.jpg", | |
| "prize":25.30, | |
| "comm":2100, | |
| "rate":98, | |
| }, | |
| { | |
| "_id":17, | |
| "name":"失落的秘符", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_two/7.jpg", | |
| "prize":33.20, | |
| "comm":1100, | |
| "rate":97, | |
| }, | |
| { | |
| "_id":18, | |
| "name":"超杀人事件", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_two/8.jpg", | |
| "prize":18.70, | |
| "comm":800, | |
| "rate":95, | |
| }, | |
| { | |
| "_id":19, | |
| "name":"玫瑰的名字", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_two/9.jpg", | |
| "prize":45.80, | |
| "comm":600, | |
| "rate":94, | |
| }, | |
| { | |
| "_id":20, | |
| "name":"假如假期来临", | |
| "img":"//image.buslive.cn/awjdc_1222/images/top_two/10.jpg", | |
| "prize":27.20, | |
| "comm":400, | |
| "rate":99, | |
| } | |
| ]; | |
| //低分主流 | |
| var lo_img1 = [{ | |
| "_id":21, | |
| "name":"解忧杂货店", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_one/1.jpg", | |
| "prize":27.00, | |
| "comm":79000, | |
| "rate":94, | |
| }, | |
| { | |
| "_id":22, | |
| "name":"加贺探案集(4)", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_one/2.jpg", | |
| "prize":21.00, | |
| "comm":71000, | |
| "rate":93, | |
| }, | |
| { | |
| "_id":23, | |
| "name":"秘密", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_one/3.jpg", | |
| "prize":23.50, | |
| "comm":71000, | |
| "rate":92, | |
| }, | |
| { | |
| "_id":24, | |
| "name":"幸存者", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_one/4.jpg", | |
| "prize":24.80, | |
| "comm":18000, | |
| "rate":93, | |
| }, | |
| { | |
| "_id":25, | |
| "name":"余罪：我的刑侦笔记6", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_one/5.jpg", | |
| "prize":29.00, | |
| "comm":16000, | |
| "rate":92, | |
| }, | |
| { | |
| "_id":26, | |
| "name":"余罪：我的刑侦笔记3", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_one/6.jpg", | |
| "prize":26.40, | |
| "comm":16000, | |
| "rate":93, | |
| }, | |
| { | |
| "_id":27, | |
| "name":"余罪：我的刑侦笔记4", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_one/7.jpg", | |
| "prize":29.00, | |
| "comm":16000, | |
| "rate":94, | |
| }, | |
| { | |
| "_id":28, | |
| "name":"假面饭店", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_one/8.jpg", | |
| "prize":28.70, | |
| "comm":8500, | |
| "rate":94, | |
| }, | |
| { | |
| "_id":29, | |
| "name":"假面前夜", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_one/9.jpg", | |
| "prize":24.90, | |
| "comm":8500, | |
| "rate":93, | |
| }, | |
| { | |
| "_id":30, | |
| "name":"清明上河图密码", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_one/10.jpg", | |
| "prize":34.30, | |
| "comm":7200, | |
| "rate":92, | |
| } | |
| ]; | |
| //低分利基 | |
| var lt_img1 =[{ | |
| "_id":31, | |
| "name":"暗算", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_two/1.jpg", | |
| "prize":38.30, | |
| "comm":3900, | |
| "rate":91, | |
| }, | |
| { | |
| "_id":32, | |
| "name":"死神的精确度", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_two/2.jpg", | |
| "prize":29.50, | |
| "comm":3100, | |
| "rate":92, | |
| }, | |
| { | |
| "_id":33, | |
| "name":"杀手界", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_two/3.jpg", | |
| "prize":30.60, | |
| "comm":3100, | |
| "rate":90, | |
| }, | |
| { | |
| "_id":34, | |
| "name":"火车上的女孩", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_two/4.jpg", | |
| "prize":27.20, | |
| "comm":2300, | |
| "rate":92, | |
| }, | |
| { | |
| "_id":35, | |
| "name":"同级生", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_two/5.jpg", | |
| "prize":23.80, | |
| "comm":2300, | |
| "rate":89, | |
| }, | |
| { | |
| "_id":36, | |
| "name":"彷徨之刃", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_two/6.jpg", | |
| "prize":23.80, | |
| "comm":2300, | |
| "rate":89, | |
| }, | |
| { | |
| "_id":37, | |
| "name":"邪恶催眠师3", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_two/7.jpg", | |
| "prize":26.10, | |
| "comm":1000, | |
| "rate":91, | |
| }, | |
| { | |
| "_id":38, | |
| "name":"神探伽利略2", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_two/8.jpg", | |
| "prize":22.10, | |
| "comm":700, | |
| "rate":93, | |
| }, | |
| { | |
| "_id":39, | |
| "name":"地下街的雨", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_two/9.jpg", | |
| "prize":19.70, | |
| "comm":400, | |
| "rate":91, | |
| }, | |
| { | |
| "_id":40, | |
| "name":"怪笑小说", | |
| "img":"//image.buslive.cn/awjdc_1222/images/low_two/10.jpg", | |
| "prize":25.10, | |
| "comm":300, | |
| "rate":92, | |
| } | |
| ] | |
| // 剩余场景数 4,5,6,7,8,9,10,11,12,13,14,15 | |
| var _num1 = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; | |
| var _num2 = Math.floor(Math.random() * _num1.length); | |
| var _num=(_num1[_num2]); | |
| var scene_status=_num; | |
| var arr = [ | |
| {"key1":"to_img1","value1":8,"key2":"tt_img1","value2":0}, | |
| {"key1":"to_img1","value1":6,"key2":"tt_img1","value2":2}, | |
| {"key1":"to_img1","value1":8,"key2":"lo_img1","value2":0}, | |
| {"key1":"to_img1","value1":6,"key2":"lo_img1","value2":2}, | |
| {"key1":"to_img1","value1":8,"key2":"lt_img1","value2":0}, | |
| {"key1":"to_img1","value1":6,"key2":"lt_img1","value2":2}, | |
| {"key1":"tt_img1","value1":8,"key2":"lo_img1","value2":0}, | |
| {"key1":"tt_img1","value1":6,"key2":"lo_img1","value2":2}, | |
| {"key1":"to_img1","value1":2,"key2":"tt_img1","value2":6}, | |
| {"key1":"to_img1","value1":0,"key2":"tt_img1","value2":8}, | |
| {"key1":"to_img1","value1":2,"key2":"lo_img1","value2":6}, | |
| {"key1":"to_img1","value1":0,"key2":"lo_img1","value2":8}, | |
| {"key1":"to_img1","value1":2,"key2":"lt_img1","value2":6}, | |
| {"key1":"to_img1","value1":0,"key2":"lt_img1","value2":8}, | |
| {"key1":"tt_img1","value1":2,"key2":"lo_img1","value2":6}, | |
| {"key1":"tt_img1","value1":0,"key2":"lo_img1","value2":8}, | |
| ]; | |
| var data=getArrayItems(eval(arr[_num].key1),arr[_num].value1); | |
| var data2=getArrayItems(eval(arr[_num].key2),arr[_num].value2); | |
| data_to(data); | |
| data_to(data2); | |
| function data_to(data){ | |
| var html=''; | |
| for(var i=0;i<data.length;i++){ | |
| html+='<li id="hi_'+data[i]._id+'">\ | |
| <aside><a href="javascript:void(0)"><img class="hotImg" src='+data[i].img+'></a></aside>\ | |
| <article>\ | |
| <h6>'+data[i].name+'</h6>\ | |
| <p>￥<em>'+data[i].prize+'</em></p>\ | |
| <p><em>'+data[i].comm+'</em>条评论</p>\ | |
| <p><em>'+data[i].rate+'</em>%好评</p>\ | |
| <a href="javascript:void(0)">加入购物车</a>\ | |
| </article>\ | |
| </li>'; | |
| } | |
| $(".hotList ul").append(html); | |
| } | |
| // //banner | |
| // $(function(){ | |
| // var swiperBanner = new Swiper('.banner', { | |
| // loop:true, | |
| // pagination:".bannerSum" | |
| // }); | |
| // }); | |
| $(".commonList ul li:gt(11)").hide(); | |
| $(document).on("click",".more",function(){ | |
| $(".commonList ul li:gt(11)").show(); | |
| $(".more").hide(); | |
| }); | |
| $(function(){ | |
| $(document).on("click",".closePop",function(){ | |
| $(".goodsInfoPop").fadeOut(200); | |
| }); | |
| $(document).on("click",".endPop .popMain .backHomePage",function(){ | |
| location.href="index.html"; | |
| }); | |
| var goodsArrComm=[]; | |
| var goodsArrHot=[]; | |
| //热门推荐 | |
| $(document).on("click",".hotList ul li aside a",function(){ | |
| $(".goodsInfoPop").fadeIn(200); | |
| var _id = $(this).parent().parent('li').attr("id"); | |
| $(".hotList ul li aside a").attr("data_id",_id); | |
| var _title=$("#" + _id).children("article").find("h6").text(); | |
| var _info1=$("#"+_id).children("article").children("p:eq(0)").find("em").text(); | |
| var _info2=$("#"+_id).children("article").children("p:eq(1)").find("em").text(); | |
| var _info3=$("#"+_id).children("article").children("p:eq(2)").find("em").text(); | |
| var _src=$("#"+_id).children("aside").find("a img").attr("src"); | |
| $(".goodsInfoPop .mainInfo h3").html(_title); | |
| $(".goodsInfoPop .mainInfo article p:eq(0) em").html(_info1); | |
| $(".goodsInfoPop .mainInfo article p:eq(1) em").html(_info2); | |
| $(".goodsInfoPop .mainInfo article p:eq(2) em").html(_info3); | |
| $(".goodsInfoPop .mainInfo aside img").attr("src",_src); | |
| }); | |
| $(document).on("click",".hotList ul li article a",function(){ | |
| var _id = $(this).parent().parent('li').attr("id"); | |
| var _this = $(this).attr("data_id",_id); | |
| if($(_this).hasClass("removeS")){ | |
| $("#"+_id).children("article").find("a").css("background","#ff5a11"); | |
| $("#"+_id).children("article").find("a").removeClass("removeS").html("加入购物车"); | |
| var t_name= $("#"+_id).children("article").find("h6").text(); | |
| var b_n = goodsArrHot.indexOf(t_name); | |
| goodsArrHot.splice(b_n, 1); | |
| console.log(goodsArrHot); | |
| var n = parseInt($(".noyangshi a em").text()); | |
| n=(n-1); | |
| $(".noyangshi a em").html(n); | |
| if(n<5){ | |
| $(".noyangshi a").css("background-color","#666666").parent("div").removeClass("buyBtn").addClass("buyBtnToo"); | |
| } | |
| }else{ | |
| $("#"+_id).children("article").find("a").addClass("removeS").html("移除购物车"); | |
| $("#"+_id).children("article").find("a").css("background","#666666"); | |
| var hb_name = $("#"+_id).children("article").find("h6").text(); | |
| goodsArrHot.push(hb_name); | |
| console.log(goodsArrHot); | |
| var n = parseInt($(".noyangshi a em").text()); | |
| n=(n+1); | |
| if(n > 4){ | |
| $(".noyangshi a").css("background-color","#ff5a11").parent('div').addClass("buyBtn"); | |
| } | |
| $(".noyangshi a em").html(n); | |
| } | |
| }); | |
| // //点击图片显示详细信息 | |
| // $(document).on("click",".commonList ul li aside a",function(){ | |
| // $(".goodsInfoPop").fadeIn(200); | |
| // var _id = $(this).parent().parent('li').attr("id"); | |
| // $(".commonList ul li aside a").attr("data_id",_id); | |
| // var _title=$("#" + _id).children("article").find("h6").text(); | |
| // var _info1=$("#"+_id).children("article").children("p:eq(0)").find("em").text(); | |
| // var _info2=$("#"+_id).children("article").children("p:eq(1)").find("em").text(); | |
| // var _info3=$("#"+_id).children("article").children("p:eq(2)").find("em").text(); | |
| // var _src=$("#"+_id).children("aside").find("a img").attr("src"); | |
| // $(".goodsInfoPop .mainInfo h3").html(_title); | |
| // $(".goodsInfoPop .mainInfo article p:eq(0) em").html(_info1); | |
| // $(".goodsInfoPop .mainInfo article p:eq(1) em").html(_info2); | |
| // $(".goodsInfoPop .mainInfo article p:eq(2) em").html(_info3); | |
| // $(".goodsInfoPop .mainInfo aside img").attr("src",_src); | |
| // }); | |
| //加入购物车 | |
| $(document).on("click",".commonList ul li article a",function(){ | |
| var _id = $(this).parent().parent('li').attr("id"); | |
| var _this = $(this).attr("data_id",_id); | |
| if($(_this).hasClass("removeS")){ | |
| $("#"+_id).children("article").find("a").css("background","#ff5a11"); | |
| $("#"+_id).children("article").find("a").removeClass("removeS").html("加入购物车"); | |
| var ct_name= $("#"+_id).children("article").find("h6").text(); | |
| var arrIndex = Math.floor(Math.random()*goodsArrComm.length); | |
| var cb_n = goodsArrComm.indexOf(ct_name); | |
| goodsArrComm.splice(cb_n, 1); | |
| console.log(goodsArrComm); | |
| var n = parseInt($(".noyangshi a em").text()); | |
| n=(n-1); | |
| $(".noyangshi a em").html(n); | |
| if(n<5){ | |
| $(".noyangshi a").css("background-color","#666666").parent("div").removeClass("buyBtn").addClass("buyBtnToo"); | |
| } | |
| }else{ | |
| $("#"+_id).children("article").find("a").addClass("removeS").html("移除购物车"); | |
| $("#"+_id).children("article").find("a").css("background","#666666"); | |
| var b_name = $("#"+_id).children("article").find("h6").text(); | |
| goodsArrComm.push(b_name); | |
| console.log(goodsArrComm); | |
| var n = parseInt($(".noyangshi a em").text()); | |
| n=(n+1); | |
| if(n > 4){ | |
| $(".noyangshi a").css("background-color","#ff5a11").parent('div').addClass("buyBtn"); | |
| } | |
| $(".noyangshi a em").html(n); | |
| } | |
| }); | |
| //存储数据 | |
| $(document).on("click",".buyBtn a",function(){ | |
| var user_num_data = getCookie('user_num'); | |
| var scene_status=_num; | |
| var sj_Number = Math.random(); | |
| var cut_sj_Number = (sj_number.toString().substring(2)); | |
| var cut_user_num_data = (user_num_data.substring(2)); | |
| AV.initialize('WVcpwOApF0G5SMl5kr2dLfhW-gzGzoHsz', 'pB6JnQf7i8l4RkShabUT4bWl'); | |
| var books = AV.Object.extend('books'); | |
| var testObject = new books(); | |
| testObject.save({ | |
| booksNameHot : goodsArrHot, | |
| booksNameComm : goodsArrComm, | |
| SJ_Number : cut_sj_Number, | |
| user_num : cut_user_num_data, | |
| scene_status_num : scene_status | |
| }, { | |
| success: function(object) { | |
| location.href="end.html"; | |
| } | |
| }, function(error) { | |
| alert(error); | |
| }); | |
| }) | |
| }); | |
| </script> | |
| </body> | |
| <script> | |
| var _hmt = _hmt || []; | |
| (function() { | |
| var hm = document.createElement("script"); | |
| hm.src = "//hm.baidu.com/hm.js?818abfb5827257869fc349f7a2be4c29"; | |
| var s = document.getElementsByTagName("script")[0]; | |
| s.parentNode.insertBefore(hm, s); | |
| })(); | |
| </script> | |
| </html> |
实验模型2：
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no" /> | |
| <meta name="format-detection" content="telephone=no"> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="blank" /> | |
| <title>鼠标</title> | |
| <link type="text/css" rel="stylesheet" href="//image.buslive.cn/awjdc_1222/css/base.css"> | |
| <link type="text/css" rel="stylesheet" href="//image.buslive.cn/awjdc_1222/css/mouse.css"> | |
| <script type="text/javascript" src="//image.buslive.cn/awjdc_1222/js/fontSize.js"></script> | |
| <script type="text/javascript" src="//image.buslive.cn/awjdc_1222/js/jquery-1.10.2.min.js"></script> | |
| <script type="text/javascript" src="//image.buslive.cn/awjdc_1222/js/function.js"></script> | |
| <script src="//image.buslive.cn/ynyd/js/av-mini-0.6.4.js"></script> | |
| <script src="//image.buslive.cn/ynyd/js/av-core-mini-0.6.4.js"></script> | |
| </head> | |
| <body> | |
| <div class="listBox" style="height:9.5rem;overflow:auto;"> | |
| <!-- <div class="banner"> | |
| <ul class="swiper-wrapper"> | |
| <li class="swiper-slide"><a href=""><img src="//image.buslive.cn/awjdc_1222/images/mouse_swiper/b1.jpg"></a></li> | |
| <li class="swiper-slide"><a href=""><img src="//image.buslive.cn/awjdc_1222/images/mouse_swiper/b2.jpg"></a></li> | |
| <li class="swiper-slide"><a href=""><img src="//image.buslive.cn/awjdc_1222/images/mouse_swiper/b3.jpg"></a></li> | |
| <li class="swiper-slide"><a href=""><img src="//image.buslive.cn/awjdc_1222/images/mouse_swiper/b4.jpg"></a></li> | |
| <li class="swiper-slide"><a href=""><img src="//image.buslive.cn/awjdc_1222/images/mouse_swiper/b5.jpg"></a></li> | |
| </ul> | |
| <div class="bannerSum"></div> | |
| </div> --> | |
| <div class="hotList"> | |
| <h3>热门推荐</h3> | |
| <ul></ul> | |
| </div> | |
| <div class="commonList"> | |
| <h3>商品列表</h3> | |
| <ul> | |
| <li id="img_1"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s1.jpg"></a></aside> | |
| <article> | |
| <h6>罗技M185鼠标</h6> | |
| <p>￥<em>69.00</em></p> | |
| <p>130000<em>条评论</em></p> | |
| <p>96%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_2"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s2.jpg"></a></aside> | |
| <article> | |
| <h6>华硕UX300鼠标</h6> | |
| <p>￥<em>39.90</em></p> | |
| <p>115000<em>条评论</em></p> | |
| <p>92%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_3"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s3.jpg"></a></aside> | |
| <article> | |
| <h6>罗技M185鼠标</h6> | |
| <p>￥<em>69.00</em></p> | |
| <p>110000<em>条评论</em></p> | |
| <p>95%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_4"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s4.jpg"></a></aside> | |
| <article> | |
| <h6>罗技M105鼠标</h6> | |
| <p>￥<em>49.00</em></p> | |
| <p>95000<em>条评论</em></p> | |
| <p>90%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_5"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s5.jpg"></a></aside> | |
| <article> | |
| <h6>双飞燕N-810FX针光鼠</h6> | |
| <p>￥<em>49.00</em></p> | |
| <p>70000<em>条评论</em></p> | |
| <p>96%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_6"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s6.jpg"></a></aside> | |
| <article> | |
| <h6>双飞燕OP-550NU针光鼠</h6> | |
| <p>￥<em>38.00</em></p> | |
| <p>50000<em>条评论</em></p> | |
| <p>97%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_7"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s7.jpg"></a></aside> | |
| <article> | |
| <h6>联想M120大红点</h6> | |
| <p>￥<em>39.00</em></p> | |
| <p>38000<em>条评论</em></p> | |
| <p>94%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_8"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s8.jpg"></a></aside> | |
| <article> | |
| <h6>罗技B175商用</h6> | |
| <p>￥<em>79.00</em></p> | |
| <p>29000<em>条评论</em></p> | |
| <p>93%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_9"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s9.jpg"></a></aside> | |
| <article> | |
| <h6>富勒M65节能</h6> | |
| <p>￥<em>29.90</em></p> | |
| <p>27000<em>条评论</em></p> | |
| <p>94%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_10"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s10.jpg"></a></aside> | |
| <article> | |
| <h6>Thinkpad OB47161无线</h6> | |
| <p>￥<em>99.00</em></p> | |
| <p>24000<em>条好评</em></p> | |
| <p>97%<em>评论</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_11"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s11.jpg"></a></aside> | |
| <article> | |
| <h6>讯拓幽灵A310激光</h6> | |
| <p>￥<em>69.90</em></p> | |
| <p>10100<em>条评论</em></p> | |
| <p>91%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_12"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s12.jpg"></a></aside> | |
| <article> | |
| <h6>雷柏3500P无线光学</h6> | |
| <p>￥<em>69.00</em></p> | |
| <p>10000<em>条评论</em></p> | |
| <p>97%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_13"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s13.jpg"></a></aside> | |
| <article> | |
| <h6>雷柏 M350无线</h6> | |
| <p>￥<em>69.00</em></p> | |
| <p>8500<em>条评论</em></p> | |
| <p>94%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_14"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s14.jpg"></a></aside> | |
| <article> | |
| <h6>现代HY-G35有线发光</h6> | |
| <p>￥<em>29.00</em></p> | |
| <p>6800<em>条评论</em></p> | |
| <p>92%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_15"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s15.jpg"></a></aside> | |
| <article> | |
| <h6>摩豹G608静音</h6> | |
| <p>￥<em>29.90</em></p> | |
| <p>5400<em>条评论</em></p> | |
| <p>95%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_16"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s16.jpg"></a></aside> | |
| <article> | |
| <h6>摩天手G52无线</h6> | |
| <p>￥<em>29.90</em></p> | |
| <p>4600<em>条评论</em></p> | |
| <p>93%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_17"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s17.jpg"></a></aside> | |
| <article> | |
| <h6>航世A10蓝牙</h6> | |
| <p>￥<em>49.00</em></p> | |
| <p>3400<em>条评论</em></p> | |
| <p>90%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_18"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s18.jpg"></a></aside> | |
| <article> | |
| <h6>得力3715 USB有线</h6> | |
| <p>￥<em>29.00</em></p> | |
| <p>2400<em>条评论</em></p> | |
| <p>98%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_19"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s19.jpg"></a></aside> | |
| <article> | |
| <h6>多彩M612 青锋鲨</h6> | |
| <p>￥<em>99.00</em></p> | |
| <p>400<em>条评论</em></p> | |
| <p>88%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| <li id="img_20"> | |
| <aside><a href="javascript:void(0)"><img src="//image.buslive.cn/awjdc_1222/images/mouse/s20.jpg"></a></aside> | |
| <article> | |
| <h6>飞利浦 SPK7101</h6> | |
| <p>￥<em>29.90</em></p> | |
| <p>200<em>条评论</em></p> | |
| <p>99%<em>好评</em></p> | |
| <a href="javascript:void(0)">加入购物车</a> | |
| </article> | |
| </li> | |
| </ul> | |
| <a href="javascript:void(0)" class="more" style="display:inline-block;width:6.4rem;height:0.6rem;line-height:0.6rem;text-align:center;font-size:0.24rem;color:#666666;">加载更多</a> | |
| </div> | |
| </div> | |
| <div class="noyangshi buyBtnToo"> | |
| <a href="javascript:void(0)">购物车结算(<em>0</em>)</a> | |
| </div> | |
| <div class="endPop"> | |
| <div class="popMain"> | |
| <p>完成！</p> | |
| <p>感谢您的参与,谢谢！</p> | |
| <a href="javascript:void(0)" class="backHomePage">返回首页</a> | |
| </div> | |
| </div> | |
| <script> | |
| function getCookie(name) { | |
| var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); | |
| if(arr=document.cookie.match(reg)) | |
| return unescape(arr[2]); | |
| else | |
| return null; | |
| } | |
| function setCookie(name,value) | |
| { | |
| var Days = 30; | |
| var exp = new Date(); | |
| exp.setTime(exp.getTime() + Days*24*60*60*1000); | |
| document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); | |
| } | |
| var user_num = getCookie('user_num'); | |
| if (!user_num) { | |
| user_num = Math.random(); | |
| setCookie('user_num', user_num); | |
| } | |
| //随机数 | |
| var sj_number=Math.random(); | |
| //随机取出 | |
| //从一个随机数组arr中取出num个不同的数 | |
| function getArrayItems(arr, num) { | |
| var temp_array = new Array(); | |
| for (var index in arr) { | |
| temp_array.push(arr[index]); | |
| } | |
| var return_array = new Array(); | |
| for (var i = 0; i<num; i++) { | |
| if (temp_array.length>0) { | |
| var arrIndex = Math.floor(Math.random()*temp_array.length); | |
| return_array[i] = temp_array[arrIndex]; | |
| temp_array.splice(arrIndex, 1); | |
| } else { | |
| break; | |
| } | |
| } | |
| return return_array; | |
| } | |
| //高分主流 | |
| var to_img1=[{ | |
| "_id":1, | |
| "name":"雷柏M218鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_zhu/1.jpg", | |
| "prize":34.80, | |
| "comm":200000, | |
| "rate":97, | |
| }, | |
| { | |
| "_id":2, | |
| "name":"罗技M100r鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_zhu/2.jpg", | |
| "prize":49.00, | |
| "comm":190000, | |
| "rate":96, | |
| }, | |
| { | |
| "_id":3, | |
| "name":"双飞燕WM-100针光鼠", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_zhu/3.jpg", | |
| "prize":29.90, | |
| "comm":150000, | |
| "rate":96, | |
| }, | |
| { | |
| "_id":4, | |
| "name":"罗技M185鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_zhu/4.jpg", | |
| "prize":69.60, | |
| "comm":240000, | |
| "rate":95, | |
| }, | |
| { | |
| "_id":5, | |
| "name":"罗技M90鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_zhu/5.jpg", | |
| "prize":35.50, | |
| "comm":150000, | |
| "rate":95, | |
| }, | |
| { | |
| "_id":6, | |
| "name":"雷柏M218鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_zhu/6.jpg", | |
| "prize":34.80, | |
| "comm":130000, | |
| "rate":97, | |
| }, | |
| { | |
| "_id":7, | |
| "name":"罗技M275鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_zhu/7.jpg", | |
| "prize":85.00, | |
| "comm":110000, | |
| "rate":97, | |
| }, | |
| { | |
| "_id":8, | |
| "name":"罗技M100r鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_zhu/8.jpg", | |
| "prize":49.00, | |
| "comm":66000, | |
| "rate":96, | |
| }, | |
| { | |
| "_id":9, | |
| "name":"罗技M275鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_zhu/9.jpg", | |
| "prize":99.00, | |
| "comm":30000, | |
| "rate":97, | |
| }, | |
| { | |
| "_id":10, | |
| "name":"雷柏M130鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_zhu/10.jpg", | |
| "prize":29.90, | |
| "comm":26000, | |
| "rate":96, | |
| } | |
| ]; | |
| //高分利基 | |
| var tt_img1 = [{ | |
| "_id":11, | |
| "name":"双飞燕OP—520NU针光鼠", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_li/1.jpg", | |
| "prize":36.00, | |
| "comm":18000, | |
| "rate":97, | |
| }, | |
| { | |
| "_id":12, | |
| "name":"讯拓风行指A231鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_li/2.jpg", | |
| "prize":19.90, | |
| "comm":17000, | |
| "rate":95, | |
| }, | |
| { | |
| "_id":13, | |
| "name":"dostyle MD102鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_li/3.jpg", | |
| "prize":25.00, | |
| "comm":16000, | |
| "rate":96, | |
| }, | |
| { | |
| "_id":14, | |
| "name":"Thinkpad 0B47151鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_li/4.jpg", | |
| "prize":69.00, | |
| "comm":9600, | |
| "rate":94, | |
| }, | |
| { | |
| "_id":15, | |
| "name":"新贵追风豹010鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_li/5.jpg", | |
| "prize":13.90, | |
| "comm":5800, | |
| "rate":97, | |
| }, | |
| { | |
| "_id":16, | |
| "name":"联想N1901A鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_li/6.jpg", | |
| "prize":49.00, | |
| "comm":4900, | |
| "rate":98, | |
| }, | |
| { | |
| "_id":17, | |
| "name":"雷柏V19鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_li/7.jpg", | |
| "prize":79.00, | |
| "comm":1800, | |
| "rate":96, | |
| }, | |
| { | |
| "_id":18, | |
| "name":"罗技M280鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_li/8.jpg", | |
| "prize":99.00, | |
| "comm":1400, | |
| "rate":97, | |
| }, | |
| { | |
| "_id":19, | |
| "name":"宜博M109鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_li/9.jpg", | |
| "prize":49.00, | |
| "comm":700, | |
| "rate":95, | |
| }, | |
| { | |
| "_id":20, | |
| "name":"新贵N107鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/gao_li/10.jpg", | |
| "prize":89.00, | |
| "comm":400, | |
| "rate":99, | |
| } | |
| ]; | |
| //低分主流 | |
| var lo_img1 = [{ | |
| "_id":21, | |
| "name":"dostyle MD201鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_zhu/1.jpg", | |
| "prize":99.00, | |
| "comm":180000, | |
| "rate":93, | |
| }, | |
| { | |
| "_id":22, | |
| "name":"大尺寸办公鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_zhu/2.jpg", | |
| "prize":35.00, | |
| "comm":150000, | |
| "rate":94, | |
| }, | |
| { | |
| "_id":23, | |
| "name":"现代HY-N11鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_zhu/3.jpg", | |
| "prize":34.90, | |
| "comm":74000, | |
| "rate":90, | |
| }, | |
| { | |
| "_id":24, | |
| "name":"现代M106鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_zhu/4.jpg", | |
| "prize":19.90, | |
| "comm":41000, | |
| "rate":93, | |
| }, | |
| { | |
| "_id":25, | |
| "name":"讯拓幽灵蜂X7鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_zhu/5.jpg", | |
| "prize":29.90, | |
| "comm":42000, | |
| "rate":93, | |
| }, | |
| { | |
| "_id":26, | |
| "name":"罗技G90鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_zhu/6.jpg", | |
| "prize":99.00, | |
| "comm":31000, | |
| "rate":94, | |
| }, | |
| { | |
| "_id":27, | |
| "name":"微软鼠标3000V2.0", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_zhu/7.jpg", | |
| "prize":79.00, | |
| "comm":40000, | |
| "rate":94, | |
| }, | |
| { | |
| "_id":28, | |
| "name":"达尔优执法鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_zhu/8.jpg", | |
| "prize":68.90, | |
| "comm":27000, | |
| "rate":92, | |
| }, | |
| { | |
| "_id":29, | |
| "name":"雷柏M310 Nano鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_zhu/9.jpg", | |
| "prize":49.90, | |
| "comm":63000, | |
| "rate":94, | |
| }, | |
| { | |
| "_id":30, | |
| "name":"达尔优G60鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_zhu/10.jpg", | |
| "prize":139.00, | |
| "comm":53000, | |
| "rate":93, | |
| } | |
| ]; | |
| //低分利基 | |
| var lt_img1 =[{ | |
| "_id":31, | |
| "name":"现代HY—N271200DPI鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_li/1.jpg", | |
| "prize":39.90, | |
| "comm":14000, | |
| "rate":88, | |
| }, | |
| { | |
| "_id":32, | |
| "name":"摩豹F60鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_li/2.jpg", | |
| "prize":29.90, | |
| "comm":11000, | |
| "rate":91, | |
| }, | |
| { | |
| "_id":33, | |
| "name":"摩天手G52无线", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_li/3.jpg", | |
| "prize":69.90, | |
| "comm":6800, | |
| "rate":93, | |
| }, | |
| { | |
| "_id":34, | |
| "name":"富勒X100鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_li/4.jpg", | |
| "prize":99.00, | |
| "comm":4000, | |
| "rate":92, | |
| }, | |
| { | |
| "_id":35, | |
| "name":"幽灵骑士XM—502B鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_li/5.jpg", | |
| "prize":19.00, | |
| "comm":3700, | |
| "rate":90, | |
| }, | |
| { | |
| "_id":36, | |
| "name":"现代NY—N16鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_li/6.jpg", | |
| "prize":29.90, | |
| "comm":3100, | |
| "rate":93, | |
| }, | |
| { | |
| "_id":37, | |
| "name":"新贵E500鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_li/7.jpg", | |
| "prize":39.00, | |
| "comm":1600, | |
| "rate":90, | |
| }, | |
| { | |
| "_id":38, | |
| "name":"新贵钢铁侠鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_li/8.jpg", | |
| "prize":36.90, | |
| "comm":1000, | |
| "rate":92, | |
| }, | |
| { | |
| "_id":39, | |
| "name":"讯拓幽灵蜂X9鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_li/9.jpg", | |
| "prize":69.00, | |
| "comm":900, | |
| "rate":91, | |
| }, | |
| { | |
| "_id":40, | |
| "name":"新贵多色糖果鼠标", | |
| "img":"//image.buslive.cn/awjdc_1222/images/di_li/10.jpg", | |
| "prize":29.90, | |
| "comm":700, | |
| "rate":90, | |
| } | |
| ] | |
| // 剩余场景数 4,5,6,7,8,9,10,11,12,13,14,15 | |
| var _num1 = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; | |
| var _num2 = Math.floor(Math.random() * _num1.length); | |
| var _num=(_num1[_num2]); | |
| var scene_status=_num; | |
| var arr = [ | |
| {"key1":"to_img1","value1":8,"key2":"tt_img1","value2":0}, | |
| {"key1":"to_img1","value1":6,"key2":"tt_img1","value2":2}, | |
| {"key1":"to_img1","value1":8,"key2":"lo_img1","value2":0}, | |
| {"key1":"to_img1","value1":6,"key2":"lo_img1","value2":2}, | |
| {"key1":"to_img1","value1":8,"key2":"lt_img1","value2":0}, | |
| {"key1":"to_img1","value1":6,"key2":"lt_img1","value2":2}, | |
| {"key1":"tt_img1","value1":8,"key2":"lo_img1","value2":0}, | |
| {"key1":"tt_img1","value1":6,"key2":"lo_img1","value2":2}, | |
| {"key1":"to_img1","value1":2,"key2":"tt_img1","value2":6}, | |
| {"key1":"to_img1","value1":0,"key2":"tt_img1","value2":8}, | |
| {"key1":"to_img1","value1":2,"key2":"lo_img1","value2":6}, | |
| {"key1":"to_img1","value1":0,"key2":"lo_img1","value2":8}, | |
| {"key1":"to_img1","value1":2,"key2":"lt_img1","value2":6}, | |
| {"key1":"to_img1","value1":0,"key2":"lt_img1","value2":8}, | |
| {"key1":"tt_img1","value1":2,"key2":"lo_img1","value2":6}, | |
| {"key1":"tt_img1","value1":0,"key2":"lo_img1","value2":8}, | |
| ]; | |
| var data=getArrayItems(eval(arr[_num].key1),arr[_num].value1); | |
| var data2=getArrayItems(eval(arr[_num].key2),arr[_num].value2); | |
| data_to(data); | |
| data_to(data2); | |
| function data_to(data){ | |
| var html=''; | |
| for(var i=0;i<data.length;i++){ | |
| html+='<li id="hi_'+data[i]._id+'">\ | |
| <aside><a href="javascript:void(0)"><img class="hotImg" src='+data[i].img+'></a></aside>\ | |
| <article>\ | |
| <h6>'+data[i].name+'</h6>\ | |
| <p>￥<em>'+data[i].prize+'</em></p>\ | |
| <p><em>'+data[i].comm+'</em>条评论</p>\ | |
| <p><em>'+data[i].rate+'</em>%好评</p>\ | |
| <a href="javascript:void(0)">加入购物车</a>\ | |
| </article>\ | |
| </li>'; | |
| } | |
| $(".hotList ul").append(html); | |
| } | |
| // $(function(){ | |
| // var swiperBanner = new Swiper('.banner', { | |
| // loop:true, | |
| // pagination:".bannerSum" | |
| // }); | |
| // }); | |
| $(".commonList ul li:gt(11)").hide(); | |
| $(document).on("click",".more",function(){ | |
| $(".commonList ul li:gt(11)").show(); | |
| $(".more").hide(); | |
| }); | |
| $(function(){ | |
| $(document).on("click",".closePop",function(){ | |
| $(".goodsInfoPop").fadeOut(200); | |
| }); | |
| $(document).on("click",".endPop .popMain .backHomePage",function(){ | |
| location.href="index.html"; | |
| }); | |
| var goodsArrComm=[]; | |
| var goodsArrHot=[]; | |
| //热门推荐 | |
| $(document).on("click",".hotList ul li aside a",function(){ | |
| $(".goodsInfoPop").fadeIn(200); | |
| var _id = $(this).parent().parent('li').attr("id"); | |
| $(".hotList ul li aside a").attr("data_id",_id); | |
| var _title=$("#" + _id).children("article").find("h6").text(); | |
| var _info1=$("#"+_id).children("article").children("p:eq(0)").find("em").text(); | |
| var _info2=$("#"+_id).children("article").children("p:eq(1)").find("em").text(); | |
| var _info3=$("#"+_id).children("article").children("p:eq(2)").find("em").text(); | |
| var _src=$("#"+_id).children("aside").find("a img").attr("src"); | |
| $(".goodsInfoPop .mainInfo h3").html(_title); | |
| $(".goodsInfoPop .mainInfo article p:eq(0) em").html(_info1); | |
| $(".goodsInfoPop .mainInfo article p:eq(1) em").html(_info2); | |
| $(".goodsInfoPop .mainInfo article p:eq(2) em").html(_info3); | |
| $(".goodsInfoPop .mainInfo aside img").attr("src",_src); | |
| }); | |
| $(document).on("click",".hotList ul li article a",function(){ | |
| var _id = $(this).parent().parent('li').attr("id"); | |
| var _this = $(this).attr("data_id",_id); | |
| if($(_this).hasClass("removeS")){ | |
| $("#"+_id).children("article").find("a").css("background","#ff5a11"); | |
| $("#"+_id).children("article").find("a").removeClass("removeS").html("加入购物车"); | |
| var t_name= $("#"+_id).children("article").find("h6").text(); | |
| var arrIndex = Math.floor(Math.random()*goodsArrHot.length); | |
| var b_n = goodsArrHot.indexOf(t_name); | |
| // console.log(b_n); | |
| goodsArrHot.splice(b_n, 1); | |
| console.log(goodsArrHot); | |
| var n = parseInt($(".noyangshi a em").text()); | |
| n=(n-1); | |
| $(".noyangshi a em").html(n); | |
| if(n<5){ | |
| $(".noyangshi a").css("background-color","#666666").parent("div").removeClass("buyBtn").addClass("buyBtnToo"); | |
| } | |
| }else{ | |
| $("#"+_id).children("article").find("a").addClass("removeS").html("移除购物车"); | |
| $("#"+_id).children("article").find("a").css("background","#666666"); | |
| var hb_name = $("#"+_id).children("article").find("h6").text(); | |
| goodsArrHot.push(hb_name); | |
| console.log(goodsArrHot); | |
| var n = parseInt($(".noyangshi a em").text()); | |
| n=(n+1); | |
| if(n > 4){ | |
| $(".noyangshi a").css("background-color","#ff5a11").parent('div').addClass("buyBtn"); | |
| } | |
| $(".noyangshi a em").html(n); | |
| } | |
| }); | |
| // //点击图片显示详细信息 | |
| // $(document).on("click",".commonList ul li aside a",function(){ | |
| // $(".goodsInfoPop").fadeIn(200); | |
| // var _id = $(this).parent().parent('li').attr("id"); | |
| // $(".commonList ul li aside a").attr("data_id",_id); | |
| // var _title=$("#" + _id).children("article").find("h6").text(); | |
| // var _info1=$("#"+_id).children("article").children("p:eq(0)").find("em").text(); | |
| // var _info2=$("#"+_id).children("article").children("p:eq(1)").find("em").text(); | |
| // var _info3=$("#"+_id).children("article").children("p:eq(2)").find("em").text(); | |
| // var _src=$("#"+_id).children("aside").find("a img").attr("src"); | |
| // $(".goodsInfoPop .mainInfo h3").html(_title); | |
| // $(".goodsInfoPop .mainInfo article p:eq(0) em").html(_info1); | |
| // $(".goodsInfoPop .mainInfo article p:eq(1) em").html(_info2); | |
| // $(".goodsInfoPop .mainInfo article p:eq(2) em").html(_info3); | |
| // $(".goodsInfoPop .mainInfo aside img").attr("src",_src); | |
| // }); | |
| //加入购物车 | |
| $(document).on("click",".commonList ul li article a",function(){ | |
| var _id = $(this).parent().parent('li').attr("id"); | |
| var _this = $(this).attr("data_id",_id); | |
| if($(_this).hasClass("removeS")){ | |
| $("#"+_id).children("article").find("a").css("background","#ff5a11"); | |
| $("#"+_id).children("article").find("a").removeClass("removeS").html("加入购物车"); | |
| var ct_name= $("#"+_id).children("article").find("h6").text(); | |
| var arrIndex = Math.floor(Math.random()*goodsArrComm.length); | |
| var cb_n = goodsArrComm.indexOf(ct_name); | |
| goodsArrComm.splice(cb_n, 1); | |
| console.log(goodsArrComm); | |
| var n = parseInt($(".noyangshi a em").text()); | |
| n=(n-1); | |
| $(".noyangshi a em").html(n); | |
| if(n<5){ | |
| $(".noyangshi a").css("background-color","#666666").parent("div").removeClass("buyBtn").addClass("buyBtnToo"); | |
| } | |
| }else{ | |
| $("#"+_id).children("article").find("a").addClass("removeS").html("移除购物车"); | |
| $("#"+_id).children("article").find("a").css("background","#666666"); | |
| var b_name = $("#"+_id).children("article").find("h6").text(); | |
| goodsArrComm.push(b_name); | |
| console.log(goodsArrComm); | |
| var n = parseInt($(".noyangshi a em").text()); | |
| n=(n+1); | |
| if(n > 4){ | |
| $(".noyangshi a").css("background-color","#ff5a11").parent('div').addClass("buyBtn"); | |
| } | |
| $(".noyangshi a em").html(n); | |
| } | |
| }); | |
| //存储页面数据 | |
| $(document).on("click",".buyBtn a",function(){ | |
| var user_num_data = getCookie('user_num'); | |
| var sj_Number = Math.random(); | |
| var scene_status=_num; | |
| var cut_sj_Number = (sj_number.toString().substring(2)); | |
| var cut_user_num_data = (user_num_data.substring(2)); | |
| AV.initialize('WVcpwOApF0G5SMl5kr2dLfhW-gzGzoHsz', 'pB6JnQf7i8l4RkShabUT4bWl'); | |
| var mouses = AV.Object.extend('mouses'); | |
| var testObject = new mouses(); | |
| testObject.save({ | |
| mousesNameHot : goodsArrHot, | |
| mousesNameComm : goodsArrComm, | |
| SJ_Number : cut_sj_Number, | |
| user_num : cut_user_num_data, | |
| scene_status_num : scene_status | |
| }, { | |
| success: function(object) { | |
| location.href="end.html"; | |
| } | |
| }, function(error) { | |
| alert(error); | |
| }); | |
| }) | |
| }); | |
| </script> | |
| </body> | |
| <script> | |
| var _hmt = _hmt || []; | |
| (function() { | |
| var hm = document.createElement("script"); | |
| hm.src = "//hm.baidu.com/hm.js?818abfb5827257869fc349f7a2be4c29"; | |
| var s = document.getElementsByTagName("script")[0]; | |
| s.parentNode.insertBefore(hm, s); | |
| })(); | |
| </script> | |
| </html> |
尾页，结束页：
1.获取用户购买商品的cookie‘ id，保持身份一致，增加调查数据的准确性
2.尾页实验调查，增加用户体验，增加实验调查数据的可靠性，多样性，对搜集数组的分析总结提供参考
3。搜集数据，匹配用户身份，存储服务器。
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no" /> | |
| <meta name="format-detection" content="telephone=no"> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="blank" /> | |
| <title>调查</title> | |
| <link type="text/css" rel="stylesheet" href="//image.buslive.cn/awjdc_1222/css/base.css"> | |
| <link type="text/css" rel="stylesheet" href="//image.buslive.cn/awjdc_1222/css/end.css"> | |
| <script type="text/javascript" src="//image.buslive.cn/awjdc_1222/js/fontSize.js"></script> | |
| <script type="text/javascript" src="//image.buslive.cn/awjdc_1222/js/jquery-1.10.2.min.js"></script> | |
| <script src="//image.buslive.cn/ynyd/js/av-mini-0.6.4.js"></script> | |
| <script src="//image.buslive.cn/ynyd/js/av-core-mini-0.6.4.js"></script> | |
| </head> | |
| <body> | |
| <ul class="cardList"> | |
| <li> | |
| <h3>1.您的性别</h3> | |
| <p><a href="javascript:void(0)" class="sex" data="男"><span>男</span></a></p> | |
| <p><a href="javascript:void(0)" class="sex" data="女"><span>女</span></a></p> | |
| </li> | |
| <li> | |
| <h3>2.您的年龄</h3> | |
| <p><a href="javascript:void(0)" class="age" data="20岁以下"><span>20岁以下</span></a></p> | |
| <p><a href="javascript:void(0)" class="age" data="20-25岁"><span>20-25岁</span></a></p> | |
| <p><a href="javascript:void(0)" class="age" data="26-30岁"><span>26-30岁</span></a></p> | |
| <p><a href="javascript:void(0)" class="age" data="30岁以上"><span>30岁以上</span></a></p> | |
| </li> | |
| <li> | |
| <h3>3.您平均多长时间进行一次网络购物</h3> | |
| <p><a href="javascript:void(0)" class="time" data="每月4次以上"><span>每月4次以上</span></a></p> | |
| <p><a href="javascript:void(0)" class="time" data="每月1-4次"><span>每月1-4次</span></a></p> | |
| <p><a href="javascript:void(0)" class="time" data="每季度1-2次"><span>每季度1-2次</span></a></p> | |
| <p><a href="javascript:void(0)" class="time" data="没季度不到1次"><span>每季度不到1次</span></a></p> | |
| </li> | |
| <!-- <li style="height:3.5rem;"> | |
| <h3>5.您平时在网络购物过程中，最关注产品的哪些信息呢？(请至少回答两种,用逗号分隔)</h3> | |
| <textarea name="" class="comm"></textarea> | |
| </li> --> | |
| <li> | |
| <h3>4.您平时在网络购物过程中,最关注产品的哪些信息(多选)？</h3> | |
| <p><a href="javascript:void(0)" class="info" data="价格"><span>价格</span></a></p> | |
| <p><a href="javascript:void(0)" class="info" data="品牌"><span>品牌</span></a></p> | |
| <p><a href="javascript:void(0)" class="info" data="销量"><span>销量</span></a></p> | |
| <p><a href="javascript:void(0)" class="info" data="评分"><span>评分</span></a></p> | |
| <p><a href="javascript:void(0)" class="info" data="评论内容"><span>评论内容</span></a></p> | |
| <p><a href="javascript:void(0)" class="info" data="售后保障"><span>售后保障</span></a></p> | |
| </li> | |
| </ul> | |
| <div class="infoBox"> | |
| <p><span>其他</span><input type="text" class="info_txt" value=""></p> | |
| </div> | |
| <div class="nobuy buyBtnToo"> | |
| <a href="javascript:void(0)">提交</a> | |
| </div> | |
| <div class="endPop"> | |
| <div class="popMain"> | |
| <p>感谢您的配合，</p> | |
| <p>祝您生活愉快,谢谢！</p> | |
| <a href="javascript:void(0)" class="backHomePage">返回首页</a> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| //存 取cookie | |
| function getCookie(name) { | |
| var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); | |
| if(arr=document.cookie.match(reg)) | |
| return unescape(arr[2]); | |
| else | |
| return null; | |
| } | |
| function setCookie(name,value) | |
| { | |
| var Days = 30; | |
| var exp = new Date(); | |
| exp.setTime(exp.getTime() + Days*24*60*60*1000); | |
| document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); | |
| } | |
| $(function(){ | |
| var user_num = getCookie('user_num'); | |
| if (!user_num) { | |
| user_num = Math.random(); | |
| setCookie('user_num', user_num); | |
| } | |
| //性别 | |
| var sex_data=0; | |
| $('.sex').click(function(){ | |
| var _this=$(this); | |
| sex_data=_this.attr('data'); | |
| _this.addClass('checked').parent().siblings().children().removeClass('checked'); | |
| if(sex_data!==0&&age_data!==0&&time_data!==0&&info_arr.length!=0){ | |
| $(".nobuy a").parent("div").addClass("toBuyBtn").removeClass("buyBtnToo"); | |
| }; | |
| console.log(sex_data); | |
| }); | |
| //年龄 | |
| var age_data=0; | |
| $('.age').click(function(){ | |
| var _this=$(this); | |
| age_data=_this.attr('data'); | |
| _this.addClass('checked').parent().siblings().children().removeClass('checked'); | |
| if(sex_data!==0&&age_data!==0&&time_data!==0&&info_arr.length!=0){ | |
| $(".nobuy a").parent("div").addClass("toBuyBtn").removeClass("buyBtnToo"); | |
| }; | |
| console.log(age_data); | |
| }); | |
| //网购次数 | |
| var time_data=0; | |
| $('.time').click(function(){ | |
| var _this=$(this); | |
| time_data=_this.attr('data'); | |
| _this.addClass('checked').parent().siblings().children().removeClass('checked'); | |
| if(sex_data!==0&&age_data!==0&&time_data!==0&&info_arr.length!=0){ | |
| $(".nobuy a").parent("div").addClass("toBuyBtn").removeClass("buyBtnToo"); | |
| }; | |
| console.log(time_data); | |
| }); | |
| //关注信息 | |
| var info_arr=[]; | |
| $(".info").click(function(){ | |
| var _this=$(this); | |
| if(_this.hasClass("checked")){ | |
| _this.removeClass("checked"); | |
| var d_d=_this.attr("data"); | |
| var b_n = info_arr.indexOf(d_d); | |
| info_arr.splice(b_n, 1); | |
| }else{ | |
| info_data=_this.attr("data"); | |
| _this.addClass("checked"); | |
| info_arr.push(info_data); | |
| } | |
| if(sex_data!==0&&age_data!==0&&time_data!==0&&info_arr.length!=0){ | |
| $(".nobuy a").parent("div").addClass("toBuyBtn").removeClass("buyBtnToo"); | |
| } | |
| console.log(info_arr); | |
| }) | |
| // //其他 | |
| // var info_txt_data=0; | |
| // $(".info_txt").keyup(function(){ | |
| // info_txt_data=$(this).val(); | |
| // info_arr.push(info_txt_data); | |
| // console.log(info_arr); | |
| // }) | |
| // //关注 | |
| // var comm_data=0; | |
| // $('.comm').keyup(function(){ | |
| // area_comm_data=$(".comm").val(); | |
| // if(area_comm_data.length>0){ | |
| // comm_data=area_comm_data; | |
| // if(sex_data!==0&&age_data!==0&&time_data!==0&&comm_data!==0){ | |
| // $(".nobuy a").parent("div").addClass("toBuyBtn").removeClass("buyBtnToo"); | |
| // }; | |
| // } else { | |
| // $(".nobuy a").parent("div").addClass("buyBtnToo").removeClass("toBuyBtn"); | |
| // } | |
| // console.log(comm_data); | |
| // }); | |
| $(document).on("click",".endPop .popMain .backHomePage",function(){ | |
| location.href="index.html"; | |
| }); | |
| //存储数据 | |
| $(document).on("click",".toBuyBtn a",function(){ | |
| var otherInfo=$(".info_txt").val(); | |
| console.log(otherInfo); | |
| var user_num_data = getCookie('user_num'); | |
| var cut_user_num_data = (user_num_data.substring(2)); | |
| AV.initialize('WVcpwOApF0G5SMl5kr2dLfhW-gzGzoHsz', 'pB6JnQf7i8l4RkShabUT4bWl'); | |
| var user_info = AV.Object.extend('user_info'); | |
| var testObject = new user_info(); | |
| testObject.save({ | |
| sex : sex_data, | |
| age : age_data, | |
| time : time_data, | |
| goods : info_arr, | |
| other : otherInfo, | |
| user_num : cut_user_num_data | |
| }, { | |
| success: function(object) { | |
| $(".endPop").fadeIn(100); | |
| } | |
| }, function(error) { | |
| alert(error); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| var _hmt = _hmt || []; | |
| (function() { | |
| var hm = document.createElement("script"); | |
| hm.src = "//hm.baidu.com/hm.js?818abfb5827257869fc349f7a2be4c29"; | |
| var s = document.getElementsByTagName("script")[0]; | |
| s.parentNode.insertBefore(hm, s); | |
| })(); | |
| </script> | |
| </html> |
个人做的一个小实验，和大家一起学习，希望大家多多指教。
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
