<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];
}
}
}