javascript购物车cookie存取

最新推荐文章于 2023-11-03 21:23:23 发布

谁牵引了你的泪

最新推荐文章于 2023-11-03 21:23:23 发布

阅读量552

点赞数

分类专栏： javascript 文章标签： javascript购物车cookie存

本文链接：https://blog.csdn.net/king_spunch/article/details/51779891

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>购物车</title>
   <style>
   *{
       margin:0;
       padding:0;
   }
   #box{
       position:absolute;
       left:700px;
       top:100px;
       background:#ccc;
       overflow:hidden;
   }
   .pic{
       float:left;
       width:170px;
       height:250px;
       border:1px solid #f00;
       margin-right:10px;
   }
   .pic p{
       line-height:20px;
       text-align:center;
       font-size:12px;
   }
   .pic p span{
       color:#d01744;
       font-size:18px;
       font-weight:bold;
   }
   .pic p em{
       color:#d01744;
       font-size:18px;
       font-style:normal;
   }
   .pic .btn{
       margin-top:5px;
       margin-left:40px;
   }
   a{
       position:absolute;
       left:870px;
       top:360px;
       display:block;
       width:200px;
       height:60px;
       line-height:60px;
       text-align:center;
       text-decoration:none;
       color:#fff;
       background:#333;
   }
   </style>
</head>
<body>
   <div id="box">
       <div class="pic">
           <img mysrc="images/shirt_1.jpg" src="images/shirt_1.jpg" />
           <p>商品名称：<em>shirt</em></p>
           <p>商品价格：<span>200</span></p>
           <input class="btn" type="button" value="添加到购物车"/>
       </div>
       <div class="pic">
           <img mysrc="images/shirt_2.jpg" src="images/shirt_2.jpg" />
           <p>商品名称：<em>shirt</em></p>
           <p>商品价格：<span>330</span></p>
           <input class="btn" type="button" value="添加到购物车"/>
       </div>
       <div style="margin-right:0px;" class="pic">
           <img mysrc="images/shirt_3.jpg" src="images/shirt_1.jpg" />
           <p>商品名称：<em>shirt</em></p>
           <p id="price">商品价格：<span>590</span></p>
           <input class="btn" type="button" value="添加到购物车"/>
       </div>
   </div>
   <a href="mycar.html">我的购物车</a>
   <script>
   var oBtn=document.getElementsByTagName('input');

   //alert(price);
   //alert(oDiv.length);
   for(var j=0;j<oBtn.length;j++){
       oBtn[j].index=j;                //索引
       oBtn[j].οnclick=function(){
           var div=this.parentNode;             //找父元素
           var mySrc=div.children[0].getAttribute('mysrc');    //自定义mysrc属性，getAttribute('attr')获取
           var name=div.children[1].firstElementChild.innerHTML;
           var price=div.children[2].firstElementChild.innerHTML;
           var v=mySrc + '|' + name + '|' + price;           //定义v=所要存的value值
           setCookie(this.index,v,7);                          //索引设为cookie的key，便于遍历到当前商品
           setCookie('len',oBtn.length,7);                  //调用setCookie()方法   //将按钮的长度存为cookie值，以便获取索引
       }
   }

   </script>
   <script src="js/cookie.js"></script>
</body>

</html>

/*以上为存放cookie*/

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title>mycar</title>
   <style>
   *{
       margin:0;
       padding:0;
   }
   li{
       list-style:none;
   }
   ul{
       width:920px;
       overflow:hidden;
   }
   li{
       float:left;
       width:300px;
       padding:3px;
       position:relative;
   }
   li p{
       line-height:30px;
       border:1px solid #00f;
       text-align:center;
       color:#d01744;
   }
   li span{
       display:block;
       height:210px;
       border:1px solid #00f;
       margin-top:3px;
       color:#0f0;
       text-align:center;
       line-height:210px;
       font-size:50px;
   }
   li span img{
       position:absolute;
       top:50px;
       left:60px;
       color:#0f0;
   }
   </style>
</head>
<body>
   <h1 style="margin-left:870px;">我的购物车</h1>

   <script src="js/cookie.js"></script>
   <script>/*
   //getCookie('imgSrc1');
   //getcookie('name');
   //getcookie('price');

   var oSpan=document.getElementsByTagName('span');
   oSpan[0].innerHTML='<img src="' + getCookie('imgSrc2') + '"/>';
   oSpan[1].innerHTML=getCookie('name2');
   oSpan[2].innerHTML=getCookie('price2');*/

   var oSpan=document.getElementsByTagName('span');
   var len=getCookie('len');
   var arr1=[];
   for(var j=0;j<len;j++){//遍历，当cookie、存在将下标返回
       if( getCookie(j) ){ //cookie存在返回true；不存在返回undefined
           arr1=getCookie(j).split('|');//存在返回cookie的key，即循环的当前索引
           createDiv();    //调用创建div的函数
       }
   }

   function createDiv(){//创建div的方法
       var oUl=document.createElement('ul');//将cookie的值直接写入html结构，做好字符串拼接
       oUl.innerHTML='<li>'+
           '<p>商品图片</p>'+
           '<span>'+'<img src="' + arr1[0] + '" />' + '</span>'+
       '</li>'+
       '<li>'+
           '<p>商品名称</p>'+
           '<span>'+ arr1[1] +'</span>'+
       '</li>'+
       '<li>'+
           '<p>商品价格</p>'+
           '<span>'+arr1[2]+'</span>'+
       '</li>';
       document.body.appendChild(oUl);
   }

   </script>

</body>
</html>

/*以上为cookie取值*/

    /*
       设置cookie（创建、修改）封装cookie
   */
   function setCookie(key,value,expires,path,domain,secure){
       var strCookie = key + "=" + value;
       if(expires){
           strCookie = strCookie + ";expires=" + expires;
       }
       if(path){
           strCookie = strCookie + ";path=" + path;
       }
       if(domain){
           strCookie = strCookie + ";domain=" + domain;
       }
       if(secure){
           strCookie = strCookie + ";secure";
       }

       document.cookie = strCookie;
   }

   function removeCooike(key){
       var date = new Date();
       date.setDate(-1);
       setCookie(key,null,date)
   }

   /*获取cookie*/
   function getCookie(key){
       var str = document.cookie;
       var cookiesArr = str.split("; ");
       for(var i = 0;i<cookiesArr.length;i++){   //cookiesArr[0] key=value
           var cookie = cookiesArr[i];
           var arr = cookie.split("=");   //key,value
           if(key==arr[0]){
               return arr[1];
           }
       }
   }

谁牵引了你的泪

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript购物车cookie存取

购物车 *{ margin:0; padding:0; } #box{ position:absolute; left:700px; top:100px; background:#ccc; overflow:hidden;
复制链接

扫一扫