好程序員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>