leancloud存储，cookie缓存，实现简单实验调查购物车

由 匿名 (未验证) 提交于 2019-12-03 00:43:02

主页，欢迎页

<!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" ><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：

<!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>

尾页，结束页：

<!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");
}
标签
comm
num
脚本
em
prize
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!