获取的数量为String类型, 需要用Number进行强制类型转换, 单价不需要转, 因为在乘法中默认转换
函数封装步骤
1. 创建一个空函数
2. 重复代码/目标代码放入
3. 原位置调用
4. 抽取参数 从上到下一行行抽取可变的数据为参数
5. 传参调用 把谁抽出来 就把谁传进去
6. 设置返回值 将函数内要在函数外用的数据返回出去
7. 接收返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
按照可复制的方式进行布局
1. 先布局一个的样式
-->
<ul>
<li>
<button>-</button>
<b>0</b>
<button>+</button>
单价:<span>12.5</span>元
小计: <i>0</i>元
</li>
<li>
<button>-</button>
<b>0</b>
<button>+</button>
单价:<span>125</span>元
小计: <i>0</i>元
</li>
<li>
<button>-</button>
<b>0</b>
<button>+</button>
单价:<span>175</span>元
小计: <i>0</i>元
</li>
<li>
<button>-</button>
<b>0</b>
<button>+</button>
单价:<span>10.5</span>元
小计: <i>0</i>元
</li>
<li>
<button>-</button>
<b>0</b>
<button>+</button>
单价:<span>100</span>元
小计: <i>0</i>元
</li>
</ul>
<script>
/*
1. 布局: 按照可复制的方式进行布局 先布局一个的样式 复制粘贴改其中的内容
2. js: 先去实现一行操作的效果
2.1 获取当前的父元素 复制粘贴的元素 li
2.2 其中所有的子元素 通过父元素li来获取
2.3 对应的实现效果
3. 封装代码
抽参的时候尽量抽取元素或者属性或者标签名 尽量不要抽取下标为参数
*/
var lis = document.getElementsByTagName('li');
console.log(lis);
// 实现第一个li中的效果
// m(lis[0]);
// m(lis[1]);
// m(lis[2]);
// m(lis[3]);
// m(lis[4]);
// 只有下标改变的时候 用for循环 给每一个li都调用m函数
for(var i = 0; i < lis.length; i++){
m(lis[i]);
}
// 1. 空函数
function m(father) {
/*
点击+, 数量+1, 小计跟随改变 小计 = 数量 * 单价
元素: btn b span i
*/
var btns = father.getElementsByTagName('button');
var b = father.getElementsByTagName('b')[0];
var all = father.getElementsByTagName('i')[0];
var span = father.getElementsByTagName('span')[0];
console.log(btns, b, all, span);
// 点击谁就给谁加事件
btns[1].onclick = function () {
// 获取数量
var num = b.innerHTML;
num = Number(num) + 1;
console.log(num);
// b标签的内容更新
b.innerHTML = num;
// 小计里面设置总数
all.innerHTML = num * span.innerHTML;
}
// 减号
btns[0].onclick = function () {
// 判断当前数量是几
// 获取数量
var num = b.innerHTML;
// 如果数量是0 后续代码不执行 return
if (num == 0) {
return;
}
num = Number(num) - 1;
console.log(num);
// b标签的内容更新
b.innerHTML = num;
// 小计里面设置总数
all.innerHTML = num * span.innerHTML;
}
}
</script>
</body>
</html>
1.原生JS方式实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-show</title>
</head>
<body>
<div id="app">
<h1>简易的购物车</h1>
<ul id="cart-list">
</ul>
<h1>总计:¥<span id="total"></span></h1>
</div>
<script>
let appEle = document.querySelector('#app')
let cart = [
{
id: 1,
name: 'iphone 12 pro',
price: 8799,
number: 1
},
{
id: 2,
name: '华为 mate 40',
price: 6799,
number: 1
}
]
var html = ''
var total = 0
cart.forEach((item,index) => {
total += item.price * item.number
html += `<li>
${item.name} [¥${item.price.toFixed(2)}]
<button onClick="reduceNumber(${index})">-</button>
<span>${item.number}</span>
<button onClick="addNumber(${index})">+</button>
</li>`
})
appEle.querySelector('#cart-list').innerHTML = html
// 计算总金额
appEle.querySelector('#total').innerHTML = total.toFixed(2)
function addNumber (index) {
const ele = event.target
// 获取前一个元素
const numberEle = ele.previousElementSibling
let number = parseInt(numberEle.innerText.trim())
numberEle.innerText = number + 1
cart[index].number = number + 1
// 计算总金额
countCart()
}
function reduceNumber (index) {
const ele = event.target
// 获取后一个元素
const numberEle = ele.nextElementSibling
let number = parseInt(numberEle.innerText.trim())
if (number > 1) {
numberEle.innerText = number - 1
cart[index].number = number - 1
// 计算总金额
countCart()
}
}
function countCart () {
var total = 0
cart.forEach((item,index) => {
total += item.price * item.number
})
appEle.querySelector('#total').innerHTML = total.toFixed(2)
}
</script>
</body>
</html>
2.JQuery实现简易购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQ实现简易购物车</title>
</head>
<body>
<div id="app">
<h3>JQ实现简易购物车</h3>
<ul id="cartList">
<!-- <li>
<button>-</button>
<b></b>
<button>+</button>
<span></span>
</li> -->
</ul>
<p>总价:¥
<b id="sum"></b>
</p>
</div>
</body>
<script src="./jquery.js"></script>
<script>
var cartArr = [{
id: 1,
name: 'iphone 12 pro',
price: 8799,
number: 1
},
{
id: 2,
name: '华为 mate 40',
price: 6799,
number: 1
},
{
id: 3,
name: '优衣库登山外套',
price: 499,
number: 1
},
{
id: 4,
name: 'FILA官方休闲时装运动鞋',
price: 780,
number: 1
}];
let totalPrice = 0, html = '';
// 数据渲染页面
$.each(cartArr, (i, v) => {
html += `<li>
<span>${cartArr[i].name}</span>
¥<i>${cartArr[i].price}</i>
<button class="reduce" onclick="reduce(this)">-</button>
<b>${cartArr[i].number}</b>
<button class="add" onclick="add(this)">+</button>
</li>`
totalPrice += cartArr[i].price
})
// 添加给父节点
$('#cartList').html(html)
$('#sum').html(totalPrice.toFixed(2))
//增加按钮
function add(btn) {
// console.log($(btn))
let number = $(btn).prev().html()
// console.log(number)
$(btn).prev().html(parseInt(number) + 1)
let price = $(btn).prev().prev().prev().html()
// console.log(price)
totalPrice += parseFloat(price)
$('#sum').html(totalPrice.toFixed(2))
}
function reduce(btn) {
// console.log($(btn))
let number = $(btn).next().html()
if (number == 1) return;
// console.log(number)
$(btn).next().html(parseInt(number) - 1)
let price = $(btn).prev().html()
// console.log(price)
totalPrice -= parseFloat(price)
$('#sum').html(totalPrice.toFixed(2))
}
</script>
</html>
3.Vue框架实现简易购物车(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue实现简易购物车</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
<h1>Vue实现简易购物车</h1>
<ul>
<li v-for="(item, index) of cart" :key="item.id">
{{item.name}} [¥{{item.price.toFixed(2)}}]
<button @click="reduceNumber(index)">-</button>
<span>{{item.number}}</span>
<button @click="addNumber(index)">+</button>
</li>
</ul>
<h3>总计:¥{{countCart()}}</h3>
</div>
<body>
<script>
// 在浏览器当中有一个加号与减号,每按一次加号,数字加一,按一次减号,数字减一,且这个数只能在0-10之间,可以取到0和10;
new Vue({
el: '#app',
data: {
cart: [
{
id: 1,
name: 'iphone 12 pro',
price: 8799,
number: 1
},
{
id: 2,
name: '华为 mate 40',
price: 6799,
number: 1
},
{
id: 3,
name: '优衣库登山外套',
price: 499,
number: 1
},
{
id: 4,
name: 'FILA官方休闲时装运动鞋',
price: 780,
number: 1
}
]
},
methods: {
// 增加商品购买数量
addNumber(index) {
this.cart[index].number++
},
// 减少商品购买数量
reduceNumber(index) {
// 如果index对应的商品数量大于1,把index对应的商品数量减1
if (this.cart[index].number > 1) {
this.cart[index].number--
}
},
// 计算购物车总金额
countCart() {
let total = 0
this.cart.forEach(item => {
total += item.price * item.number
});
return total.toFixed(2)
}
}
})
</script>
</body>
</html>
4.Vue框架实现简易购物车(2)-计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-show</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>简易的购物车</h1>
<ul>
<li v-for="(item,index) of cart" :key="item.id">
{{item.name}} [¥{{item.price.toFixed(2)}}]
<button @click="reduceNumber(index)">-</button>
<span>{{item.number}}</span>
<button @click="addNumber(index)">+</button>
</li>
</ul>
<h1>总计:¥{{total}}</h1>
</div>
<script>
// 在浏览器当中有一个加号与减号,每按一次加号,数字加一,按一次减号,数字减一,且这个数只能在0-10之间,可以取到0和10;
new Vue({
el: '#app',
data: {
cart: [
{
id: 1,
name: 'iphone 12 pro',
price: 8799,
number: 1
},
{
id: 2,
name: '华为 mate 40',
price: 6799,
number: 1
}
]
},
computed: {
total () {
let total = 0
this.cart.forEach(item => {
total += item.price * item.number
})
return total.toFixed(2)
}
},
methods: {
// 计算购物车的总金额
countCart () {
let total = 0
this.cart.forEach(item => {
total += item.price * item.number
})
return total.toFixed(2)
},
// 增加商品购买数量
addNumber (index) {
// 把index对应的商品的数量+1
this.cart[index].number++
// 只要数量发生改变,页面就会触发重新渲染,然后就会自动调用countCart()
},
// 减少商品购买数量
reduceNumber (index) {
// 如果index对应的商品的数量大于1,把index对应的商品的数量-1
if (this.cart[index].number > 1) {
this.cart[index].number--
}
}
}
})
</script>
</body>
</html>