原生js编写小米购物车

原生js编写小米购物车案例

思路

一、将数据渲染到下方ul中

1.遍历数据添加到li标签内

二、渲染购物车内容，将ul中li添加到购物车。添加点击事件

1.加入购物车内容1.判断购物车内需不需要添加此类商品，（1）如果不需要，value值加一 调用函数计算（小计、总价、件数）（2）如果需要，渲染购物车内容 调用函数    计算 （小计、总价、件数）判断复选全选状态
2.购物车内容1.全选复选框（1）全选注册事件：复选框状态同步全选框（2）封装（复选框状态判断全选框状态）（3）复选框注册事件：1.复选框都选中，全选框选中2.复选框一个不选中，全选框不选中3.调用函数    判断复选全选状态计算 （小计、总价、件数）2.加号减号改变value值1.加号 （1）注册事件 兄弟元素value++（2）调用函数 计算 （小计、总价、件数）2.减号 （1）注册事件 判断value是否为‘1’1>alert不能少于一 ！1>兄弟元素value--（2）调用函数 计算 （小计、总价、件数）3.删除按钮添加事件1.confirm（确认）tr删除2.else（无按钮时）全选状态false3.调用函数         判断复选全选状态计算（小计、总价、件数）
3.封装函数（小计、总价、件数）

三、代码（无图）（部分样式未修改）

1.html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>购物车</title><style>* {margin: 0px;padding: 0px;}.top {width: 1200px;margin: 50px auto;}ul li {list-style: none;}.main {width: 1200px;height: 600px;margin: 50px auto;}.main ul li {width: 200px;height: 280px;background-color: #ccc;float: left;/*display: flex;*/margin: 0 20px 20px 0;border: 1px solid #000;text-align: center;}.top {width: 1200px;margin: 50px;margin: 0px auto;}.add {width: 80px;height: 30px;border: 1px solid #000;margin: 20px auto;text-align: center;line-height: 30px;}.add:hover {cursor: pointer;background-color: pink;}.da {/*display: block;*/width: 30px;height: 30px;border-style: none;text-align: center;background-color: #fff;}td {text-align: center;}.dis {border: 1px solid #000;width: 100px;height: 31px;margin: 50px auto;}table {width: 1090px;}tbody tr {height: 50px;}.foot {float: left;;height: 50px;width: 1090px;/*background-color: red;*/line-height: 50px;margin: 20px auto;}.foot div {float: left;font-size: 20px;}.foot div:nth-child(1){margin-left: 30px;}.foot div:nth-child(2){margin-left: 550px;}.foot div:nth-child(3) input {display: block;width: 150px;height: 50px;border-style: none;background-color: orange;font-size: 20px;color: #fff;}.foot div:nth-child(3) {float: right;}</style>
</head>
<body><div class="top"><table border="1" width="1200" cellpadding="20" cellspacing="0"><thead><tr><th><input type="checkbox" class="quan"></th><th>全选</th><th>商品名称</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr></thead><tbody></tbody>
<!--             <tfoot class="foot"><tr>td</tr><div>已选择<span>0</span>件</div><div>合计：<span>0</span>元</div><div><input type="button" value="去结算"></div></tfoot> --></table><div class="foot"><div>已选择<span class="piece">0</span>件</div><div>合计：<span class="heji">0</span>元</div><div><input type="button" value="去结算"></div></div><div class="main"><ul class="box"><!-- <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> --></ul></div></div>
</body>
<script src="./js/1.js"></script>
</html>

2.js部分

var goods = [{goodsName: 'Redmi手表2',price: 379,count: 12.1,goodsSrc: './images/pic_1.png'}, {goodsName: 'Redmi 9A',price: 599,count: 113.4,goodsSrc: './images/pic_2.png'}, {goodsName: 'Aqara智能门锁 NFC卡',price: 49,count: 3.5,goodsSrc: './images/pic_3.png'}, {goodsName: '小米USB-C数据线 100cm',price: 9.9,count: 92.3,goodsSrc: './images/pic_4.png'}, {goodsName: '小米无线鼠标 Lite',price: 39,count: 25.1,goodsSrc: './images/pic_5.png'}, {goodsName: '知吾煮不粘炒锅 米家定制',price: 199,count: 1.7,goodsSrc: './images/pic_6.png'}, {goodsName: 'Xiaomi11 青春版',price: 1999,count: 109.3,goodsSrc: './images/pic_7.png'}, {goodsName: 'Redmi K40',price: 1999,count: 106.5,goodsSrc: './images/pic_8.png'}, {goodsName: '小米平板5',price: 1999,count: 51.4,goodsSrc: './images/pic_9.png'}, {goodsName: '小米智能摄像机2 云台版',price: 249,count: 8,goodsSrc: './images/pic_10.png'}, ]// 获取全选按钮的节点var quan=document.getElementsByClassName('quan')[0];// 获取每个复选框的节点var son=document.getElementsByClassName('son');// 数据渲染// 讲数据渲染到ul li中var ul=document.querySelector('.box');var tbody=document.querySelector('tbody');// 遍历数据for(var i=0;i<goods.length;i++){var li=document.createElement('li');// 将数据添加进的li里面li.innerHTML='<img src="'+goods[i].goodsSrc+'">'+'<p>'+goods[i].goodsName+'</p>'+'<span>'+goods[i].price+'元</span>'+'<p>'+goods[i].count+'万人好评</span>'+'<div class="add">添加</div>';ul.appendChild(li);}// 获取加入购物车的按钮var adds=document.getElementsByClassName('add');// 给添加购物车按钮添加点击事件for(var i=0;i<adds.length;i++){adds[i].onclick=function(){//判断购物车有没有要添加的这商品//获取到每一行var trs=document.querySelectorAll('tbody tr');// 获取到我点击的每一行的商品名称var trs_name=this.parentNode.children[1].innerHTML;var zhis=document.getElementsByClassName('zhi');//循环每一个行，就是每一行里面的商品名称for(var z=0;z<trs.length;z++){if(trs[z].children[2].innerHTML==trs_name){zhis[z].value = parseInt(zhis[z].value) + 1compute()return}}// // 获取全选按钮的节点// var quan=document.getElementsByClassName('quan')[0];// // 获取每个复选框的节点// var son=document.getElementsByClassName('son');var spimg = this.parentNode.children[0].src;var spname = this.parentNode.children[1].innerText;var spp = this.parentNode.children[2].innerText;var tr = document.createElement('tr');tr.innerHTML='<td><input type="checkbox" class="son" checked></td>'+'<td><img src="'+spimg+'"></td>'+'<td class="spname">'+spname+'</td>'+'<td class="danjia">'+spp+'</td>'+'<td><div class="dis"><input type="button" value="-" class="da jian"/><input type="text" value="1" class="da zhi"/><input type="button" value="+" class="da jia"/></div></td>'+'<td class="sub">'+spp+'</td>'+'<td><a href="#" class="del">删除</a></td>';tbody.appendChild(tr);// 函数调用compute();fn();// 全选反选quan.onclick=function(){for(var i=0;i<son.length;i++){son[i].checked=quan.checked;}}// 封装一个标记变量，记录复选框的状态，来判断全选框的状态function fn (){var flag = true;for(var i=0;i<son.length;i++){if(!son[i].checked){flag=false;}}quan.checked=flag;}// 复选框都选中，全选框选中，复选框一个不选中，全选框不选中for(var j=0;j<son.length;j++){son[j].onclick=function(){fn();compute();}}// 给加添号加点击事件var jia = document.getElementsByClassName('jia');for(var k=0;k<jia.length;k++){jia[k].onclick=function(){this.previousElementSibling.value++;compute();}}//给减号添加点击事件var jian=document.getElementsByClassName('jian');for(var l=0;l<jian.length;l++){jian[l].onclick=function(){if(this.nextElementSibling.value<=1){alert('该商品不能小于1了');}else{this.nextElementSibling.value--;}compute();}}// 给删除按钮添加点击事件var del=document.getElementsByClassName('del')for(var m=0;m<del.length;m++){del[m].onclick=function(){if(confirm('确认删除吗')){this.parentNode.parentNode.remove();}else if(del[m].length==0){quan.checked=false;}fn();compute();if(del.length==0){quan.checked=false;}}}// 封装计算小计function compute(){//拿到每一行var leng=document.querySelectorAll('tbody>tr');//声明一个存小计的变量var subtotal=0;//声明一个计件变量var count=0;//声明一个存总价的变量var sum=0;//获取合计的变量var heji =document.getElementsByClassName('heji')[0];//获取计件的变量var piece=document.querySelector('.piece');// 循环所有的行for(var i=0;i<leng.length;i++){// 获取到单价里面的每一项内容var danjia=leng[i].querySelector('.danjia').innerHTML.replace('元','');// 获取到value里面的值var zhi=leng[i].querySelector('.zhi').value;// 获取到小计里面的内容var sub = leng[i].querySelector('.sub');// 只有每行的复选框选中才会执行以下代码if(son[i].checked==true){// 小计=单价*数量subtotal=parseFloat(danjia*10*zhi)/10sub.innerHTML=subtotal+'元';//计算合计sum+=subtotal;heji.innerHTML=sum;//计算计件count+=Number(zhi);piece.innerHTML=count;}}//在没有商品的情况把小计和总价赋值为0if(leng.length==0){heji.innerHTML=0;piece.innerHTML=0;}}}//点击添加商品事件}

原生js编写小米购物车相关推荐

原生js编写的todos
原生js编写的todos 如果有什么问题,可以直接问我 <!DOCTYPE html> <html><head><meta charset="UTF ...
js html颜色代码,原生js编写的浏览器安全色网页拾色器色盘生成颜色代码
原生js编写的浏览器安全色网页拾色器 by js.alixixi.com #abc-colorPicker .colorPick-close,#filter-colorPicker .colorPic ...
利用HTML+WEBSQL（sqlite）完成创建数据库，完成对数据的增删改查（使用原生JS编写）
前端和数据在日常编写一些页面的时候总希望能够把"用户生产"的数据保存下来到数据库中.今天学习了如何用WEBSQL(可以理解为浏览器自带的SQLite数据库)进行数据的保存以及在前 ...
js购物车功能php,实战项目：用原生JS实现一个购物车的功能
实战:购物车功能一.两个实用的数组函数 1.1 Array.every() every()方法传入回调函数,这个回调函数有三个参数,分别是: item:用于测试的当前值: index:当前测试值的索 ...
原生JS编写简单的编辑器
使用vue编写的,没有任何依赖,可改写其它形式轻量级编辑器只是在document.execCommand()方法做了包装,不兼容的浏览器器生成的标签是一致的,所以的富文本的选择要根据项目决定实现了 ...
利用HTML5 canvas元素+原生JS编写贪吃蛇
我们先来看一个最简单的例子利用canvas动画编写贪吃蛇:https://clacier.github.io/tcs/ 一.什么是canvas? canvas是HTML5中新增加的一个元素,专门用于 ...
原生js编写学生信息管理系统——添加学生信息
页面样式 html <header>学生信息管理</header><table id="tablebox" class="tablebox& ...
原生JS实现小米轮播图和网易云轮播图
文章目录小米轮播图网易云轮播图小米轮播图实现功能: 定时切换(2s) 点击按钮停止切换点击向左向右按钮进行相应切换鼠标点击下方的小圆点,并进行相应的切换效果: 代码如下: <!DO ...
html微信播放器,原生js 编写的微信播放器插件（仿微信公众号播放器组件）
Document content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initia ...

原生js编写小米购物车

原生js编写小米购物车案例

思路

原生js编写小米购物车相关推荐

最新文章

热门文章