购物车和登陆注册

135 阅读1分钟

购物车

第一个页面

    var arr=[]
    for(var i=0;i<btns.length;i++){
        btns[i].index=i
        btns[i].flag=true
        btns[i].onclick=function(){
            if(this.flag){
                var json={
                    "id":this.index
                    "src":document.getElementsByClassName("src")[this.index].src,
                    "name":document.getElementsByClassName("name")[this.index].innerHTML,
                    "price":document.getElementsByClassName("price")[this.inderx]
                }
                arr.push(json)
                alert("已加入购物车")
                window.localstronge.setIteam("shop",JSON.stringify(arr))
            }else{
            
                alert("已经加入购物车")
            }
        
        }
    }

第二个页面

    var str=''
    for(var i=0;i<arr.length;i++){
        str+=`<div id="con">
             <img src="${+arr[i].img+}" />
             
             <p>
                  <button class="reduce">+</button>
                  <span class="cumputer">1</span>
                  <button class="add">-</button>
              </p> 
              
              <p>单价:<span class="price">${+arr[i].price+}</span></p>
              <p>共价:<span class="everyPrice">${+arr[i].price+}</span></p>
  
            </div>`
    }
    
    var reduce=document.getElementsByclassName("reduce")
    var add=document.getElementsByclassName("add")
    var cumputer=document.getElementsByclassName("cumputer")
    
    var price=document.getElemensByclassName("price")
    
    for(var i=0;i<add.length;i++){
        add[i].index=i
        add[i].onclick=function(){
            var n=cumputer[this.index].innerHTML
            n++
            cumputer[this.index].innerHTML=n
            
            document.getElemtByclassName("everyPrice").innerHTML=n*eprice
        }
    }
    
    for(var i=0;i<reduce.length;i++){
        reduce[i].index=i
        reduce[i].onclick=function(){
            var n=cumputer[this.index].innerHTML
            n--
            if(n<0){
                return
            }
            cumputer[this.index].innerHTML=n
            
            document.getElemtByclassName("everyPrice").innerHTML=n*eprice
        }
    }

登录注册

第一个页面

        var user=JSON.parse(localStorage.getItem("user"))
	if(!user){
	document.getElementById("container").innerHTML=`
        <span onclick="login()">请登录</span><span>请注册</span>`
         }else{  
         document.getElementById("container").innerHTML=`
        <span>${user}</span><span onclick="fun()">退出</span>`
	}
			
	function fun () {
	document.getElementById("container").innerHTML=`
        <span onclick="login()">请登录</span><span>请注册</span>`
	}
			
	function login(){
	window.location.href="./第二个页面"
	}

第二个页面

        var btn=document.getElementById("btn")
	btn.onclick=function(){
	var user=document.getElementById("user").value
	localStorage.setItem("user",JSON.stringify(user))
        window.location.href="./第一个页面"
	}