Good programmers to share front-end web front-end javascript tutorial exercises three, cookie
week free Log in
style code:
<form Action = "">
Name: <input type = "text" id = "usename" /> <br />
Password: <input type = "text" i = "mima" /> <br />
week free Log in <the INPUT of the type = "the CheckBox" />
<the INPUT of the type = "the Button" the above mentioned id = "btn" value = "Login" /> /> <br </ form>
JS function Code:
var = document.getElementsByTagName INPUT ( "INPUT");
iF (the getCookie ( "usename")) // {cookie judge whether there is data terminal
input [0] .value = getCookie ( "usename");
INPUT [. 1] .Value = the getCookie ( "password");
INPUT [2] = .checked to 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">"ID": 10001,var Data = [{
// item data transmission over background
"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;
// ADD TO CART
var cartNum = document.getElementById ( "cartNum");
var onum = cartNum.children [0];
var COUNT = 0;
document.getElementsByClassName addBtns = var ( "addBtn");
// define an object, and the number is determined to preserve id cookie, there are no data had kept, have to use, it is assigned to no} {
IF (the getCookie ( "Cart") ) {
var obj = the JSON.parse (the getCookie ( "cart")); // json string into the object
} the else {
var obj = {};
}
// get all cart quantity of a commodity
for (var i in obj) {
COUNT + = obj [I];
}
oNum.innerHTML = COUNT;
for (var I = 0; I <addBtns.length; I ++) {
addBtns [I] .onclick = function () {
while the stored data stored @ id: num cart { "10001" : 1, "10002": 3}
// If we take into consideration the cart Add commodity ID
var prodId = this.getAttribute ( "Data-ID");
IF (obj [prodId] == undefined) {
obj [prodId] =. 1;
} the 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>