小小千想和您聊一聊

当前位置: 首页> 技术分享> 前端javascript练习题-cookie及购物车

前端javascript练习题-cookie及购物车

  cookie

  一周内免登录

  样式代码:

<form action="">
    姓名:<input type="text" id="usename"/><br />
    密码:<input type="text" i="mima"/><br />
    一周内免登陆<input type="checkbox" />
    <input type="button" id="btn" value="登录"/><br /></form>

  js功能代码:

var input=document.getElementsByTagName("input");
  if(getCookie("usename")){  //判端cookie是否有数据
     input[0].value=getCookie("usename");
      input[1].value=getCookie("password");
      input[2].checked=true;
  }
  input[3].onclick=function(){
      if(input[2].checked){
          setCookie("usename",input[0].value,1);
          setCookie("password",input[1].value,1);
      }else{
          removeCookie("usename");
          removeCookie("password");
      }
  }

  //将函数作为对象的方法进行封装
    function setCookie(name,value,n){
         var date=new Date();
         date.setDate(date.getDate()+n);
        //name+"="+value+";"+"expires"+"="+odate;
      document.cookie=name+"="+value+";"+"expires"+"="+date;
     }
    function getCookie(name){
         var str=document.cookie;
         var arr=str.split(";");
         for(var i=0;i<arr.length;i++){
             var newArr=arr[i].split("=");
             if(newArr[0]==name){
                  return newArr[1];
             }
         }
     }
    function removeCookie(name){
        setCookie(name, 11, -2);
    }

  购物车

  产品页面js代码:

<script type="text/javascript">
//商品数据  后台传过来
var data = [{
   "id":10001,
   "title":"蒙牛",
   "price":60,
   "imgUrl":"img/photo1.jpg"
},{
   "id":10002,
   "title":"婚纱照",
   "price":19999,
   "imgUrl":"img/photo2.jpg"
},{
   "id":10003,
   "title":"加湿器",
   "price":100,
   "imgUrl":"img/photo3.jpg"
}];

//生成结构
var oUl = document.getElementById("productList");
var str = "";
for(var i = 0; i < data.length; i++){
   str += "<li><img src='"+data[i].imgUrl+"'><p>"+data[i].title+"</p><p>"+data[i].price+"</p><input class='addBtn' type='button' data-id='"+data[i].id+"' value='加入购物车'></li>";
}
oUl.innerHTML = str;

//加入购物车
var cartNum = document.getElementById("cartNum");
var oNum = cartNum.children[0];
var count = 0;


var addBtns = document.getElementsByClassName("addBtn");
//定义一个对象,去保存id和数量 判断cookie里有没有存过数据,有就用,没有就赋值为{}
if(getCookie("cart")){
   var obj = JSON.parse(getCookie("cart"));//将json字符串转换成对象的
}else{
   var obj = {};
}
//取所有购物车商品数量
for(var i in obj){
   count += obj[i];
}
oNum.innerHTML = count;

for(var i = 0; i < addBtns.length; i++){
   addBtns[i].onclick = function(){
      //存数据时 存id:num cart {"10001":1,"10002":3}
      //考虑如果取到加入购物车的商品id
      var prodId = this.getAttribute("data-id");
      if(obj[prodId]==undefined){
         obj[prodId] = 1;
      }else{
         obj[prodId]++;
      }
      
      //把这个对象存到cookie
      
      //console.log(obj);
      
      var objToStr = JSON.stringify(obj);//将js对象(数组,对象)转换成JSON格式的字符串
      
      setCookie("cart",objToStr,7);
      
      //显示购物篮中的数量
      oNum.innerHTML = ++count;

   }
}</script>

  cart页面的js代码:

<script type="text/javascript">
   /*var data = [{
      "id":10001,
      "title":"蒙牛",
      "price":60,
      "imgUrl":"img/photo1.jpg"
   },{
      "id":10002,
      "title":"婚纱照",
      "price":19999,
      "imgUrl":"img/photo2.jpg"
   },{
      "id":10003,
      "title":"加湿器",
      "price":100,
      "imgUrl":"img/photo3.jpg"
   }];*/
   var data = {"10001":{
      "id":10001,
      "title":"蒙牛",
      "price":60,
      "imgUrl":"img/photo1.jpg"
   },"10002":{
      "id":10002,
      "title":"婚纱照",
      "price":19999,
      "imgUrl":"img/photo2.jpg"
   },"10003":{
      "id":10003,
      "title":"加湿器",
      "price":100,
      "imgUrl":"img/photo3.jpg"
   }};
   var oList = document.getElementById("cartList");
   var obj = {};
   if(getCookie("cart")){
      obj = JSON.parse(getCookie("cart"));
   }
   var str = "";
   for(var i in obj){
      /*for(var j = 0; j < data.length; j++){
         if(i==data[j].id){
            str += "<li><img src='"+data[j].imgUrl+"'><span>"+data[j].title+"</span><span>"+data[j].price+"</span><span>"+obj[i]+"</span></li>"
         }
      }*/
   str += "<li><img src='"+data[i].imgUrl+"'><span>"+data[i].title+"</span><span>"+data[i].price+"</span><span>"+obj[i]+"</span></li>"
      
   }
   oList.innerHTML = str;
</script>

上一篇:前端 javascript 练习题-拖拽及九宫格

下一篇:前端javascript练习题-正则表达式

QQ技术交流群

千锋HTML5官方②群
857920838

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码