javascript购物车
2019-06-04 08:55
113 查看
购物车
<style type="text/css">
body,html{
background-color: whitesmoke;
}
.shopBox{
width: 425px;
height: 375px;
background-color: white;
margin: 0 auto;
position: relative;
}
.shopLine{
/*background-color: pink;*/
height: 70px;
padding: 15px;
position: relative;
box-shadow: 3px 3px 3px #dddddd;
margin-bottom: 3px;
}
.shopLine img{
float: left;
width: 70px;
height: 70px;
}
.inputBox{
float: left;
margin-top: 30px;
margin-right: 10px;
}
.shopDetails{
float: left;
margin-left: 20px;
}
.shopDetails span{
display: block;
margin-bottom: 5px;
}
.shopDetails span:nth-child(2){
color: gray;
font-size: 13px;
margin: 8px 0;
}
.shopDetails span:nth-child(3){
color: #e4393e;
font-size: 16px;
}
.shopCalc{
position: absolute;
bottom: 10px;
right: 20px;
border: 1px solid #9A9A9A;
line-height: 30px;
text-align: center;
border-radius: 5px;
}
.calcDown,.calcUp{
display: inline-block;
width: 30px;
height: 30px;
cursor: pointer;
}
.calcNum{
width: 28px;
height: 28px;
border: none;
text-align: center;
border-left: 1px solid #9A9A9A;
border-right: 1px solid #9A9A9A;
outline: none;
}
.shopCart{
position: absolute;
width: 100%;
height: 70px;
background-color: pink;
bottom: 0;
left: 0;
}
.shopCon{
position: relative;
padding: 0 15px;
}
.totalPrices{
float: left;
margin-left: 50px;
line-height: 80px;
}
</style>
</head>
<body>
<!--
1、全选按钮的监听
2、每一个商品中的复选框 都应该被监听
3、单个商品的数量的加法
4、单个商品的数量的减法
5、数量的额手动输入
6、总价的联动
-->
<div id="app">
<div class="shopBox">
<!--第一个商品-->
<div class="shopLine">
<div class="inputBox">
<input class="sigChecked" type="checkbox" />
</div>
<img src="https:\/\/fjlyl.xyz\/assets\/hairDye\/products (1).jpg" />
<div class="shopDetails">
<span>施华蔻伊采染发膏60ml</span>
<span>规格:50克</span>
<span>¥<label class="sigPrices">50</label></span>
</div>
<div class="shopCalc">
<span class="calcDown">-</span>
<input class="calcNum" value="1" />
<span class="calcUp">+</span>
</div>
</div>
<!--第二个商品-->
<div class="shopLine">
<div class="inputBox">
<input class="sigChecked" type="checkbox" />
</div>
<img src="https:\/\/fjlyl.xyz\/assets\/hairDye\/products (1).jpg" />
<div class="shopDetails">
<span>施华蔻伊采染发膏60ml</span>
<span>规格:50克</span>
<span>¥<label class="sigPrices">69</label></span>
</div>
<div class="shopCalc">
<span class="calcDown">-</span>
<input class="calcNum" value="1" />
<span class="calcUp">+</span>
</div>
</div>
<!--底部-->
<div class="shopCart">
<div class="shopCon">
<div class="inputBox">
<input class="allChecked" type="checkbox" />全选
</div>
<div class="totalPrices">
总价:¥ <span class="allPrices">0</span>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//商品数组
var shopLine = document.getElementsByClassName('shopLine');
//价格数组
var sigPrices = document.getElementsByClassName('sigPrices');
//总价
var allPrices = document.getElementsByClassName('allPrices')[0];
//减法按钮数组
var calcDown = document.getElementsByClassName('calcDown');
//加法按钮数组
var calcUp = document.getElementsByClassName('calcUp');
//商品的数量的输入框数组
var calcNum = document.getElementsByClassName('calcNum');
//全选按钮
var allChecked = document.getElementsByClassName('allChecked')[0];
//单个勾选按钮的数组
var sigChecked = document.getElementsByClassName('sigChecked');
//全选按钮的监听onchange
allChecked.onchange = function () {
var checked = allChecked.checked;//全选按钮的已经被改变的那个值
//全部的单个复选框 都应该和 全选按钮的值是一致的
for(var i=0;i<sigChecked.length;i++){
sigChecked[i].checked = checked;
}
arrCheck();
totalPrices();
}
for(var i=0;i<shopLine.length;i++){
//每个单个勾选的监听onchange
sigChecked[i].onchange = function() {
//arrChecked 这个数组中相对应的布尔值 来去判断 全选按钮是否被勾选上
arrCheck();
var checked = true;//假定全选按钮的值为true
for(var i=0;i<arrChecked.length;i++){
if(arrChecked[i] == false){
checked = false;//只要有一个没选上 全选按钮 就没有被选上
break;
}
}
allChecked.checked = checked;
totalPrices();
}
//加法
calcUp[i].index = i;//
calcUp[i].onclick = function () {
//calcNum[this.index].value
var num = parseInt(calcNum[this.index].value) + 1;
calcNum[this.index].value = num;
totalPrices();
}
//减法
calcDown[i].index = i;
calcDown[i].onclick = function () {
//字符串 数值的时候 它是有隐式转换的嘛 '3'-1
var num = parseInt(calcNum[this.index].value);
num = num == 1?1:num - 1;
calcNum[this.index].value = num;
totalPrices();
}
//手动输入
calcNum[i].index = i;
//onblur监听 input框 脱离焦点的事件
calcNum[i].onblur = function () {
var num = calcNum[this.index].value;
//判断是否为数字
num = isNaN(num)? 1 : Math.ceil(num);
num = num < 0 ? 1 : num;
calcNum[this.index].value = num;
totalPrices();
}
}
//每次把变动的sigChecked的每个布尔值都重新获得
var arrChecked = [];
// var cart = [
// {shopId:1,isChecked:true,prices:50,shopName:'name0',num:5},
// {shopId:2,isChecked:true,prices:69,shopName:'name1',num:5}
// ]
//一开始就刷新数组里的值
arrCheck();
//每个单个勾选的布尔值的数组
function arrCheck () {
for(var i=0;i<sigChecked.length;i++){
arrChecked.splice(i,1,sigChecked[i].checked);
}
console.log(arrChecked);
//totalPrices();
}
//计算总价 每处有变动就需要做计算
function totalPrices () {
var totalPrices = 0;
for(var i=0;i<arrChecked.length;i++){
if(arrChecked[i]){
//单价*数量
totalPrices += parseFloat(sigPrices[i].innerHTML) * calcNum[i].value
}
}
allPrices.innerHTML = totalPrices;
}
</script>
效果图
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 校招编程题目(2) JavaScript：购物车操作(京东)
- JavaScript面向对象编写购物车功能
- 使用javascript编写购物车的思想
- JavaScript购物车
- JavaScript、JQuery简单实现购物车功能
- Javascript购物车 操作Cookie存取Json
- JavaScript编写一个简易购物车功能
- 每日一题_JavaScript.利用Js操作frameset框架集对象实现购物车?
- JavaScript实现购物车的功能
- 用Ajax和Javascript实现购物车
- JavaScript商城购物车结算/收货/小计和加减/表单验证
- javascript对DOM操作实例之购物车
- javascript购物车实现详细代码讲解
- JavaScript创建简单购物车对象
- JavaScript：模拟简易淘宝商城商品价格的计算（购物车）
- JavaScript实现的购物车效果-效果好友列表
- 使用JavaScript拖拽玩具产品图标到购物车的源代码
- JavaScript购物车最基本的功能
- Javascript实现购物车案例--Javascript学习
- javascript项目实战之原生js模拟淘宝购物车