好程式設計師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].>
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 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].>
//存資料時 存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>
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2665407/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 好程式設計師web前端分享前端javascript練習題三程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端javascript練習題二程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端 javascript 練習題二程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享javascript 練習題程式設計師Web前端JavaScript
- 好程式設計師web前端分享前端 javascript 練習題程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端javascript練習題之promise程式設計師Web前端JavaScriptPromise
- 好程式設計師web前端分享前端javascript練習題一程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端javascript練習題Ajax封裝程式設計師Web前端JavaScript封裝
- 好程式設計師web前端教程分享前端javascript練習題之閉包案例程式設計師Web前端JavaScript
- 好程式設計師web前端教程分javascript練習題-事件程式設計師Web前端JavaScript事件
- 好程式設計師web前端教程分享JavaScript面試題程式設計師Web前端JavaScript面試題
- 好程式設計師web前端教程分享三大前端框架相關問題程式設計師Web前端框架
- 好程式設計師web前端教程分享JavaScript簡寫方法程式設計師Web前端JavaScript
- 好程式設計師Web前端教程分享JavaScript開發技巧程式設計師Web前端JavaScript
- 好程式設計師web前端培訓分享學習JavaScript程式設計師Web前端JavaScript
- 好程式設計師Web前端教程分享Vue學習心得程式設計師Web前端Vue
- 好程式設計師web前端教程分享JavaScript Math(算數)物件程式設計師Web前端JavaScript物件
- 好程式設計師web前端教程分享web前端基礎知識程式設計師Web前端
- 好程式設計師web前端教程分享CSS技巧!程式設計師Web前端CSS
- 好程式設計師web前端教程分享前端三大框架有哪些異同程式設計師Web前端框架
- 好程式設計師web前端培訓分享JavaScript學習指南程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享Vue.js面試題程式設計師Web前端Vue.js面試題
- 好程式設計師web前端教程分享Jquery常見面試題程式設計師Web前端jQuery面試題
- 好程式設計師web前端教程分享JavaScript的執行機制!程式設計師Web前端JavaScript
- 好程式設計師Web前端分享前端CSS篇程式設計師Web前端CSS
- 好程式設計師web前端教程分享JavaScript學習筆記之Event事件二程式設計師Web前端JavaScript筆記事件
- 好程式設計師web前端教程分享js閉包程式設計師Web前端JS
- 好程式設計師web前端教程分享js模板模式程式設計師Web前端JS模式
- 好程式設計師web前端學習路線分享前端基礎面試題程式設計師Web前端面試題
- 好程式設計師web前端教程JavaScript系列之HTTP程式設計師Web前端JavaScriptHTTP
- 好程式設計師web前端教程分享web前端入門基礎知識程式設計師Web前端
- 好程式設計師web前端教程分享js reduce方法使用教程程式設計師Web前端JS
- 好程式設計師web前端教程:字串程式設計師Web前端字串
- 好程式設計師web前端分享常見面試題程式設計師Web前端面試題
- 好程式設計師web前端培訓分享JavaScript框架J程式設計師Web前端JavaScript框架
- 好程式設計師web前端培訓分享JavaScript學習筆記Promise程式設計師Web前端JavaScript筆記Promise
- 好程式設計師web前端培訓分享JavaScript學習筆記SASS程式設計師Web前端JavaScript筆記
- 好程式設計師web前端培訓分享JavaScript學習筆記cookie程式設計師Web前端JavaScript筆記Cookie