免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

web前端教程分享前端javascript練習(xí)題三，cookie

一周內(nèi)免登錄

樣式代碼：

<form action="">

    姓名：<input type="text" id="usename"/><br />

    密碼：<input type="text" i="mima"/><br />

    一周內(nèi)免登陸<input type="checkbox" />

    <input type="button" id="btn" value="登錄"/><br /></form>

js功能代碼：

 var input=document.getElementsByTagName("input");

  if(getCookie("usename")){  //判端cookie是否有數(shù)據(jù)

     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");

      }

  }

  //將函數(shù)作為對(duì)象的方法進(jìn)行封裝

    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);

    }

購物車

產(chǎn)品頁面js代碼：

<script type="text/javascript">

//商品數(shù)據(jù)  后臺(tái)傳過來

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"

}];

//生成結(jié)構(gòu)

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");

//定義一個(gè)對(duì)象，去保存id和數(shù)量 判斷cookie里有沒有存過數(shù)據(jù)，有就用，沒有就賦值為{}

if(getCookie("cart")){

   var obj = JSON.parse(getCookie("cart"));//將json字符串轉(zhuǎn)換成對(duì)象的

}else{

   var obj = {};

}

//取所有購物車商品數(shù)量

for(var i in obj){

   count += obj[i];

}

oNum.innerHTML = count;

for(var i = 0; i < addBtns.length; i++){

   addBtns[i].onclick = function(){

      //存數(shù)據(jù)時(shí) 存id:num cart {"10001":1,"10002":3}

      //考慮如果取到加入購物車的商品id

      var prodId = this.getAttribute("data-id");

      if(obj[prodId]==undefined){

         obj[prodId] = 1;

      }else{

         obj[prodId]++;

      }

      //把這個(gè)對(duì)象存到cookie

      //console.log(obj);

      var objToStr = JSON.stringify(obj);//將js對(duì)象（數(shù)組，對(duì)象）轉(zhuǎn)換成JSON格式的字符串

      setCookie("cart",objToStr,7);

      //顯示購物籃中的數(shù)量

      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>