好程序员web前端培训分享前端javascript练习题三

当前位置：首页 / 技术干货 / 正文

2019-11-22

HTML5 web前端培训好程序员 javascript

好程序员web前端培训分享前端javascript练习题三，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>
 