码迷,mamicode.com
首页 > 编程语言 > 详细

好程序员web前端教程分享前端javascript练习题三

时间:2019-11-23 09:39:12      阅读:63      评论:0      收藏:0      [点我收藏+]

标签:OLE   efi   etc   elements   ons   button   script   checked   nts   

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

好程序员web前端教程分享前端javascript练习题三

标签:OLE   efi   etc   elements   ons   button   script   checked   nts   

原文地址:https://blog.51cto.com/14573321/2452668

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!