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