当前位置: 首页 / 技术干货 / 正文
好程序员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>

 

好程序员公众号

  • · 剖析行业发展趋势
  • · 汇聚企业项目源码

好程序员开班动态

More+
  • HTML5大前端 <高端班>

    开班时间:2021-04-12(深圳)

    开班盛况

    开班时间:2021-05-17(北京)

    开班盛况
  • 大数据+人工智能 <高端班>

    开班时间:2021-03-22(杭州)

    开班盛况

    开班时间:2021-04-26(北京)

    开班盛况
  • JavaEE分布式开发 <高端班>

    开班时间:2021-05-10(北京)

    开班盛况

    开班时间:2021-02-22(北京)

    开班盛况
  • Python人工智能+数据分析 <高端班>

    开班时间:2021-07-12(北京)

    预约报名

    开班时间:2020-09-21(上海)

    开班盛况
  • 云计算开发 <高端班>

    开班时间:2021-07-12(北京)

    预约报名

    开班时间:2019-07-22(北京)

    开班盛况
IT培训IT培训
在线咨询
IT培训IT培训
试听
IT培训IT培训
入学教程
IT培训IT培训
立即报名
IT培训

Copyright 2011-2023 北京千锋互联科技有限公司 .All Right 京ICP备12003911号-5 京公网安备 11010802035720号