js利用localStorage实现购物车效果

2023-12-30 09:59:58

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style>
?? ??? ??? ?*{
?? ??? ??? ??? ?padding: 0;
?? ??? ??? ??? ?margin: 0;
?? ??? ??? ?}
?? ??? ??? ?ul,ol{
?? ??? ??? ??? ?list-style: none;
?? ??? ??? ??? ?margin-left: 20px;
?? ??? ??? ?}
?? ??? ??? ?li{
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?width: 100px;
?? ??? ??? ??? ?height: 20px;
?? ??? ??? ??? ?background-color: aqua;
?? ??? ??? ??? ?border: 1px solid red;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?line-height: 20px;
?? ??? ??? ?}
?? ??? ??? ?table{
?? ??? ??? ??? ?width: 612px;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ??? ?background-color: white;
?? ??? ??? ??? ?margin-left: 20px;
?? ??? ??? ?}
?? ??? ??? ?tbody tr td{
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ??? ?width: 100px;
?? ??? ??? ??? ?border: 1px solid black;
?? ??? ??? ?}
?? ??? ??? ?.check{
?? ??? ??? ??? ?margin-left: 30px;
?? ??? ??? ?}
?? ??? ??? ?td img{
?? ??? ??? ??? ?width: 100px;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ?}
?? ??? ??? ?td .num{
?? ??? ??? ??? ?width: 40px;
?? ??? ??? ?}
?? ??? ??? ?tr td button:nth-child(1){
?? ??? ??? ??? ?margin-left: 20px;
?? ??? ??? ?}
?? ??? ??? ?.nav{
?? ??? ??? ??? ?width: 650px;
?? ??? ??? ?}
?? ??? ??? ?/* .tab{
?? ??? ??? ??? ?width: 612px;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ??? ?background-color: blanchedalmond;
?? ??? ??? ??? ?margin-left: 20px;
?? ??? ??? ?} */
?? ??? ??? ?tfoot{
?? ??? ??? ??? ?background-color: antiquewhite;
?? ??? ??? ?}
?? ??? ??? ?.total{
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ?}
?? ??? ??? ?tfoot tr td{
?? ??? ??? ??? ?width: 100px;
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ??? ?border: none;
?? ??? ??? ?}
?? ??? ??? ?h2{
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<h1>购物车页面</h1>
?? ??? ?<hr/>
?? ??? ?<div class="nav">
?? ??? ?<ul>
?? ??? ??? ?<li>状态</li>
?? ??? ??? ?<li>图片</li>
?? ??? ??? ?<li>单价</li>
?? ??? ??? ?<li>数量</li>
?? ??? ??? ?<li>总价</li>
?? ??? ??? ?<li>操作</li>
?? ??? ?</ul>
?? ??? ?<div class="tab">
?? ??? ?<table>
?? ??? ??? ?<tbody>
<!-- ?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ? ? ?<td><input type="checkbox" class="check" data-id="${item.id}"/></td>
?? ??? ??? ??? ? ? <td><img src="${item.url}"/></td>
?? ??? ??? ??? ? ? <td><div class="price">${item.price}</div></td>
?? ??? ??? ??? ? ? <td><button data-id="${item.id}">-</button><input type="text" class="num" value="1"/><button data-id="${item.id}">+</button></td>
?? ??? ??? ??? ? ? <td>${item.cart_num*item.price}</td>
?? ??? ??? ??? ? ? <td><span>删除</span></td>
?? ??? ??? ??? ? ?</tr> -->
?? ??? ??? ?</tbody>
?? ??? ??? ?<tfoot>
?? ??? ??? ?<!-- ?? ?<tr>
?? ??? ??? ??? ?<td><input type="checkbox" class="check" /></td>
?? ??? ??? ??? ?<td><button>选中的删除</button></td>
?? ??? ??? ??? ?<td><div class="shangpin">商品件数0件</div></td>
?? ??? ??? ??? ?<td colspan="2"><div class="total">合计0元</div></td>
?? ??? ??? ?
?? ??? ??? ??? ?<td><button class="pay">支付</button></td>?? ??? ??? ??? ??? ?
?? ??? ??? ??? ? </tr> -->
?? ??? ??? ?</tfoot>
?? ??? ?</table>
?? ??? ?</div>
?? ??? ?</div>
?? ??? ?<script src="../code/js/axios.min.js"></script>
?? ??? ?<script>
?? ??? ??? ?class Cart{
?? ??? ??? ??? ?constructor(){
?? ??? ??? ??? ??? ?this.list=JSON.parse(localStorage.getItem('cart'))||[]
?? ??? ??? ??? ??? ?this.tbody=document.querySelector('table tbody')
?? ??? ??? ??? ??? ?this.tfoot=document.querySelector('table tfoot')
?? ??? ??? ??? ??? ?this.init()
?? ??? ??? ??? ?}
?? ??? ??? ??? ?init(){
?? ??? ??? ??? ??? ?this.render()
?? ??? ??? ??? ??? ?this.check()
?? ??? ??? ??? ?}
?? ??? ??? ? ? ? render(){
?? ??? ??? ??? ??? ?console.log(this.list)
?? ??? ??? ??? ??? ?var num=0,pricenum=0
?? ??? ??? ??? ??? ?if(this.list.length==0){
?? ??? ??? ??? ??? ??? ??? ?this.tbody.innerHTML=''
?? ??? ??? ??? ??? ??? ?this.tbody.innerHTML+=`
?? ??? ??? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ? ? ?<td colspan="6"><h2>还没有商品！！</h2></td>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ? ?</tr>?
?? ??? ??? ??? ??? ??? ?`
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?else{
?? ??? ??? ??? ??? ??? ?this.tbody.innerHTML=''
?? ??? ??? ??? ??? ?this.list.forEach(item=>{
?? ??? ??? ??? ??? ??? ?this.tbody.innerHTML+=`
?? ??? ??? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ? ? ?<td><input type="checkbox" class="checked" data-id="${item.id}" ?${item.is_select && 'checked'}/></td>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ? ? <td><img src="${item.url}"/></td>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ? ? <td><div class="price">${item.price}元</div></td>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ? ? <td><button data-id="${item.id}" class="del">-</button><input type="text" class="num" value="${item.cart_num}"/><button data-id="${item.id}" class="add">+</button></td>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ? ? <td>${item.cart_num*item.price}元</td>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ? ? <td><span data-id="${item.id}">删除</span></td>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ? ?</tr>?
?? ??? ??? ??? ??? ??? ?`
?? ??? ??? ??? ??? ??? ?if(item.is_select==true){
?? ??? ??? ??? ??? ??? ??? ?num+=item.cart_num
?? ??? ??? ??? ??? ??? ??? ?pricenum+=item.cart_num*item.price
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ? var res = this.list.every((item)=>{
?? ??? ??? ??? ??? ??? ?return ?item.is_select == true
?? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ??? ?if(this.list.length==0){
?? ??? ??? ??? ??? ??? ??? ?res=false
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?this.tfoot.innerHTML=`
?? ??? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ??? ?<td><input type="checkbox" class="check" ${res&&'checked'}/></td>
?? ??? ??? ??? ??? ??? ?<td><button class="btn">选中的删除</button></td>
?? ??? ??? ??? ??? ??? ?<td><div class="shangpin">商品件数${num}件</div></td>
?? ??? ??? ??? ??? ??? ?<td colspan="2"><div class="total">合计${pricenum}元</div></td>
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?<td><button class="pay">支付</button></td>?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ? </tr>
?? ??? ??? ??? ??? ?`
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?localStorage.setItem('cart',JSON.stringify(this.list))
?? ??? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ??? ?check(){
?? ??? ??? ??? ??? ?//全选和取消操作
?? ??? ??? ??? ??? ?this.tfoot.οnclick=(e)=>{
?? ??? ??? ??? ??? ??? ?var target=e.target
?? ??? ??? ??? ??? ??? ?if(target.className=='check'){
?? ??? ??? ??? ??? ??? ??? ?this.list.forEach(item=>{
?? ??? ??? ??? ??? ??? ??? ??? ?item.is_select=!item.is_select
?? ??? ??? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ??? ??? ?this.render()?? ?
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?if(target.className=='btn'){
?? ??? ??? ??? ??? ??? ??? ?var res=this.list.filter(item=>item.is_select !== true)
?? ??? ??? ??? ??? ??? ??? ?this.list=res
?? ??? ??? ??? ??? ??? ??? ?this.render()?? ?
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?if(target.className=='pay'){
?? ??? ??? ??? ??? ??? ??? ?if(confirm('确认支付吗？')){
?? ??? ??? ??? ??? ??? ??? ??? ?var price=0
?? ??? ??? ??? ??? ??? ??? ??? ?this.list.forEach(item=>{
?? ??? ??? ??? ??? ??? ??? ??? ??? ?if(item.is_select){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?price+=item.cart_num*item.price
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ??? ??? ??? ?alert(`已支付${price}元`)
?? ??? ??? ??? ??? ??? ??? ??? ?var res=this.list.filter(item=>item.is_select !== true)
?? ??? ??? ??? ??? ??? ??? ??? ?this.list=res
?? ??? ??? ??? ??? ??? ??? ??? ?this.render()?? ?
?? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?//单选
?? ??? ??? ??? ??? ?this.tbody.οnclick=(e)=>{
?? ??? ??? ??? ??? ??? ?var target=e.target
?? ??? ??? ??? ??? ??? ?if(target.className=='checked'){
?? ??? ??? ??? ??? ??? ??? ?var id=target.dataset.id-0
?? ??? ??? ??? ??? ??? ??? ?this.list.forEach(item=>{
?? ??? ??? ??? ??? ??? ??? ??? ?if(item.id==id){
?? ??? ??? ??? ??? ??? ??? ??? ??? ?item.is_select=!item.is_select
?? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ??? ??? ?this.render()?? ?
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?if(target.className=='del'){
?? ??? ??? ??? ??? ??? ??? ?// this.num=document.querySelector('.num')
?? ??? ??? ??? ??? ??? ??? ?var id=target.dataset.id-0
?? ??? ??? ??? ??? ??? ??? ?this.list.forEach(item=>{
?? ??? ??? ??? ??? ??? ??? ??? ?if(item.id==id){
?? ??? ??? ??? ??? ??? ??? ??? ??? ?item.cart_num--
?? ??? ??? ??? ??? ??? ??? ??? ??? ?if(item.cart_num==0){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?item.cart_num=1
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?alert('已经是最小值了')
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ?})
?? ??? ?
?? ??? ??? ??? ??? ??? ??? ?this.render()?? ?
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?if(target.className=='add'){
?? ??? ??? ??? ??? ??? ??? ?var id=target.dataset.id-0
?? ??? ??? ??? ??? ??? ??? ?this.list.forEach(item=>{
?? ??? ??? ??? ??? ??? ??? ??? ?if(item.id==id){
?? ??? ??? ??? ??? ??? ??? ??? ??? ?item.cart_num++
?? ??? ??? ??? ??? ??? ??? ??? ??? ?if(item.cart_num==11){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?item.cart_num=10
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?alert('已经是最大值了')
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ??? ?this.render()?? ?
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?if(target.nodeName=='SPAN'){
?? ??? ??? ??? ??? ??? ??? ?var id=target.dataset.id-0
?? ??? ??? ??? ??? ??? ??? ?var res=this.list.filter(item=>item.id !== id)?? ??? ?
?? ??? ??? ??? ??? ??? ??? ?this.list=res
?? ??? ??? ??? ??? ??? ??? ?this.render()?? ?
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?new Cart()
?? ??? ?</script>
?? ?</body>
</html>

文章来源:https://blog.csdn.net/qq_52840130/article/details/135255727
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。