`
}).join(‘’)
$(‘.render’).html(productStr)
//加入购物车
addCart()
}
}
})
}
//搜索框搜索功能
function search(){
$(‘.icon-sousuo’).on(‘click’,function(){
$.ajax({
url:‘http://127.0.0.1:4000/api/search’,
method:‘get’,
data:{
info:$(‘input[name=“search”]’).val()
},
success:function(data){
if(data.status==1){
alert(data.message)
}else{
let list=data.data
let productStr=list.map(item=>{
return `
${item.product}
￥${item.id}
`
}).join(‘’)
$(‘.render’).html(productStr)
}
}
})
})
}
//底部跳转功能
function jump(){
$(‘#foot’).on(‘click’,‘.icon-dingdan’,function(){
location.href=‘index.html’
}).on(‘click’,‘.icon-gouwuche’,function(){
location.href=‘gouwuche.html’
}).on(‘click’,‘.icon-yonghu’,function(){
location.href=“user.html”
})
}
//加入购物车
function addCart(){
$(‘.listSingle’).on(‘click’,‘.icon-gouwuche’,function(){
//获取购物车
let id=$(this).attr(‘data-index’);
$.ajax({
url:‘http://127.0.0.1:4000/api//list/id’,
method:‘get’,
data:{
id:id
},
success:function(data){
console.log(data);
if(data.status==0){
//拿到本地存储的购物车信息
let product=localStorage.getItem(‘shopList’)
let productArr=JSON.parse(product)||[]
//判定是否已经有该商品
let isOk=productArr.some(item=>item[0].id==id)
if(!isOk){
productArr.push(data.data)
localStorage.setItem(‘shopList’,JSON.stringify(productArr))
}
}
}
})
})
}
//进入商品信息界面
function shoplist(id){
location.href=‘shoplist.html?id=’+id
}
getBanner()
render()
search()
jump()
- CSS
#main {
width: 100%;
flex: 1;
overflow: auto;
background-color: aquamarine;
}
#main .swiper {
width: 100%;
height: 350px;
}
#main .specificFunctions {
width: 100%;
height: 288px;
background: url(“…/images/bc1.jpg”) no-repeat 0px -228px;
background-size: 700px auto;
}
#main .render .listSingle {
transition: 0.25s transform ease-in-out;
margin-top: 30px;
display: flex;
}
#main .render .listSingle img {
width: 438px;
height: 350px;
}
#main .render .listSingle div {
margin-left: 20px;
}
#main .render .listSingle div p:nth-child(1) {
font-size: 40px;
font-weight: 700;
}
#main .render .listSingle div p:nth-child(2) {
margin-top: 110px;
font-size: 20px;
color: grey;
}
#main .render .listSingle span {
margin-left: 18px;
margin-top: 86px;
font-size: 77px;
color: #f06c60;
}
/*# sourceMappingURL=index.css.map */
- 购物车代码
- HTML
- JS
//底部跳转功能
function jump(){
$(‘#foot’).on(‘click’,‘.icon-dingdan’,function(){
location.href=‘index.html’
}).on(‘click’,‘.icon-gouwuche’,function(){
location.href=‘gouwuche.html’
}).on(‘click’,‘.icon-yonghu’,function(){
location.href=“user.html”
})
}
//渲染商品信息
function getlist(){
let product=localStorage.getItem(‘shopList’)
let productArr=JSON.parse(product)||[]
let tableHead=`
商品名 图片 价格 数量 总价 删除`
let tableStr=productArr.map(item=>{
return `
${item[0].product}`
}).join(‘’)
$(‘table’).html(tableHead+tableStr)
}
//删除功能
$(‘table’).on(‘click’,‘.del’,function(){
//拿到id根据id删除
let id=$(this).attr(‘data-index’)
let data=JSON.parse(localStorage.getItem(‘shopList’))
let productIndex=data.findIndex(item=>item.id==id)
data.splice(productInd
最低0.47元/天 解锁文章
1517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
