一.购物车
style：
* {
margin: 0;
padding: 0;
}
table {
border: 1px solid gray;
border-collapse: collapse;
width: 500px;
height: 200px;
margin: 20px auto;
text-align: center;
}
td,
th {
border: 1px solid white;
background-color: lightblue;
}
th {
background-color: darkseagreen;
}
button {
width: 35px;
}
html:
<table>
<tr>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<td>炒细面</td>
<td>
<button> - </button>
<span class="SingleGoodNum">1</span>
<button> + </button>
</td>
<td>
单价：<span>10</span>
</td>
<td>
小计：<span class="SingleGood-TotalPrice">0</span>
</td>
<td>
操作：<input type="submit" value="删除">
</td>
</tr>
<tr>
<td>大闸蟹</td>
<td>
<button> - </button>
<span class="SingleGoodNum">10</span>
<button> + </button>
</td>
<td>
单价：<span>298</span>
</td>
<td>
小计：<span class="SingleGood-TotalPrice">0</span>
</td>
<td>
操作：<input type="submit" value="删除">
</td>
</tr>
<tr>
<td colspan="5">一共<span id="AllGoods-TotalNums">0</span>件商品,共计花费<span id="AllGoods-TotalPrices">0</span>元。
</td>
</tr>
</table>
script：
let hBtns = document.getElementsByTagName("button")
let hFnums = document.getElementsByClassName("SingleGoodNum");
let hFPrices = document.getElementsByClassName("SingleGood-TotalPrice");
let hANums = document.querySelector("#AllGoods-TotalNums");
let hAPrices = document.querySelector("#AllGoods-TotalPrices");
let hDBtns = document.getElementsByTagName("input");
class Cart{
constructor(hBtns,hFnums,hFPrices,hANums,hAPrices,hDBtns){
this.hBtns = hBtns;增减键
this.hFPrices = hFPrices;单餐合计价格
this.hFnums = hFnums;单餐份数
this.hANums = hANums;总合计餐数
this.hAPrices = hAPrices;总合计价格
this.hDBtns = hDBtns;删除键
}
总数与总价格更新
updatehANumsAndhAPrices(){
声明变量用来在循环中收集每一行菜品的数量
let nums = 0;
利用循环结构将每一行的菜品数量都加给声明好的变量，加法需要对innerhtml的字符串进行隐式转换
for(var i = 0;i<this.hFnums.length;i++){
nums+=this.hFnums[i].innerHTML/1;
}
总数，这里将收集起来的菜品数量赋值给总数
this.hANums.innerHTML = nums;
声明变量用来在循环中收集每一行菜品的价格小计
let prices = 0;
利用循环结构将每一行的菜品价格小计都加给声明好的变量，加法需要对innerhtml的字符串进行隐式转换
for(var i = 0;i<this.hFPrices.length;i++){
prices+=this.hFPrices[i].innerHTML/1;
}
总价格，这里将收集起来的菜品价格小计赋值给总价格
this.hAPrices.innerHTML = prices;
}
加餐
addFoods(btn){
根据传入的参数btn（触发事件时被点击的加量按钮）来遍历菜品数量的元素位置
let hFnums = btn.previousElementSibling;
根据传入的参数btn（触发事件时被点击的加价按钮）来遍历菜品单价的元素位置
let Price = btn.parentNode.nextElementSibling.firstElementChild;
根据传入的参数btn（触发事件时被点击的加价按钮）来遍历菜品价格小计的元素位置
let hFPrices = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
hFnums.innerHTML = hFnums.innerHTML/1+1;
计算单餐合计价格，公式为：小计 = 单价×数量，此处不需要隐式转换
hFPrices.innerHTML = hFnums.innerHTML*Price.innerHTML;
总数与总价格更新 每次加完餐品数量之后需要更新总价格和总菜品数量
this.updatehANumsAndhAPrices();
}
减餐
reduceFoods(btn){
根据传入的参数btn（触发事件时被点击的减量按钮）来遍历菜品数量的元素位置
let hFnums = btn.nextElementSibling;
根据传入的参数btn（触发事件时被点击的减量按钮）来遍历菜品单价的元素位置
let Price = btn.parentNode.nextElementSibling.firstElementChild;
根据传入的参数btn（触发事件时被点击的减量按钮）来遍历菜品价格小计的元素位置
let hFPrices = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
菜品减量需要加上前提条件，不能减成负数
if(hFnums.innerHTML>0){
hFnums.innerHTML -=1;
}
计算单餐合计价格
hFPrices.innerHTML = hFnums.innerHTML*Price.innerHTML;
最后更新菜品总数和总价格
this.updatehANumsAndhAPrices();
}
删除
delBtn(btn){
根据传入的参数btn（触发事件时被点击的删除按钮）来遍历需要删除的元素位置，也就是tr行，此处需要删除的元素tr是点击事件元素btn父元素td的父元素tr
let hTr = btn.parentNode.parentNode;
父元素移除
hTr.remove();
最后更新菜品总数和总价格
this.updatehANumsAndhAPrices();
}
集合绑定所有事件，方便统一调用
eventBind(){
此处声明变量that保存一个指向为构造函数new对象的this，在事件体里面用that带入this
let that = this;
循环结构遍历加减button组成的数组
for(let i = 0;i<this.hBtns.length;i++){
设定条件，当button键为第偶数个，就是减量按钮，第奇数个就是加量按钮，然后根据if选择条件分别绑定点击事件，然后调用加量和减量函数
if(i%2){
在类的方法里面调用类中方法的兄弟属性需要加上this，指代new创建的类对象中的该属性或元素，给对应元素绑定点击事件，此处选择第奇数个按钮，则调用加量函数事件体
this.hBtns[i].onclick = function(){
因为在事件体里面，直接使用this调用函数addFoods函数的话，此时的this在事件体重就代表触发该事件的元素，无法指向new创建的类对象，所以前面用变量that存一个指向类对象的this，在此处使用变量that等同于使用指向类对象的this
that.addFoods(this);
}
}else{
第偶数条件下的按钮同样绑定点击事件，此处调用减量函数，用法同上
this.hBtns[i].onclick = function(){
that.reduceFoods(this);
}
}
}
删除键也是利用循环结构绑定点击事件
for(let i = 0;i<this.hDBtns.length;i++){
this.hDBtns[i].onclick = function(){
that.delBtn(btn);
}
}
}
}
let a = new Cart(hBtns,hFnums,hFPrices,hANums,hAPrices,hDBtns);
a.eventBind();
二.轮播图案例
style：
*{
margin: 0;
padding: 0;
}
div{
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid ;
position: relative;
transition: 1s linear;
background-size: 500px 300px;
}
ul{
width: 80%;
display: flex;
position: absolute;
bottom:15px ;
left: 70px;
justify-content: space-evenly;
}
li{
list-style: none;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
}
#right{
width: 30px;
height: 30px;
position: absolute;
right: 10px;
top: 45%;
}
#left{
width: 30px;
height: 30px;
position: absolute;
left: 10px;
top: 45%;
}
html：
<div>
<button id="right">></button>
<button id="left"><</button>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
script：
let hB = document.querySelector("div");图片框
let hNext = document.querySelector("#right");向右按钮
let hLeft = document.querySelector("#left");向左按钮
let hLis = document.getElementsByTagName("li");底部切换按钮
class Pic{
constructor(hB,hNext,hLeft,hLis){
this.hB = hB;
this.hLeft = hLeft;
this.hNext = hNext;
this.hLis = hLis;
this.eventBind();整合绑定事件调用
this.index = 0;核心逻辑，通过改变index值改变背景图顺序和列表图标按钮
this.hB.style.backgroundImage = `url(img/${this.index}.jpg)`;模板字符串嵌套变量index
}
高频次事件优先写，方便后面调用，此处方法描述背景图随着index值的变化而变化，列表图标按钮随着每一次index的变化进行循环确认对应的图标变红，其他图标保持黑色
Lis(){
根据index值改变背景图
this.hB.style.backgroundImage = `url(img/${this.index}.jpg)`;
循环结构确认和index值对应的下标对应的列表图标。
for(let i = 0;i<this.hLis.length;i++){
if(i == this.index){
与index新值对应的列表图标变红
this.hLis[i].style.backgroundColor = `red`;
}else{
除了对应图标，其他图标保持黑色
this.hLis[i].style.backgroundColor = `black`;
}
}
}
列表图标点击事件，通过列表图标点击切换不同的背景图。
onLis(){
因为后面存在绑定点击事件体的函数，这里需要存一个this
let that = this;
循环结构确认被点击的li，为其绑定点击事件
for(let i = 0;i<this.hLis.length;i++){
this.hLis[i].onclick = function(){
为index赋上列表下标的值
that.index = i;
用这个值来改变背景图
that.Lis();
}
}
}
此处为右箭头按钮下一张事件方法
Next(){
每次事件触发index值自增
this.index++;
设置限定条件防止index自增越界，不能超过图片个数和列表下标数，当index达到li下标的最后一位，就给index赋值0，让他从第一位开始再次循环
if(this.index == this.hLis.length){
this.index = 0;
}
index值改变之后调用背景图与列表图标事件，改变背景图和图标变红的位置
this.Lis();
}
此处为右箭头按钮上一张事件方法
Left(){
每次事件触发index值自减
this.index--;
设置限定条件防止index自增越界，不能超出图片个数和列表下标数，当index达到li下标的第一位的前一位，越界了，就给index赋值li末尾，让他从末位开始往前再次循环
if(this.index == -1){
this.index = this.hLis.length-1;
}
index值改变之后调用背景图与列表图标事件，改变背景图和图标变红的位置
this.Lis();
}
自动轮播事件体
Auto(){
因为后面有鼠标移入移出的事件体绑定，此处需要存一个this；
let that = this;
let s;该变量是在为打开和关闭定时器做准备
this.hB.onmouseout= function(){为banner盒子绑定鼠标移出事件启动计时器，因为如果只绑定移入停止，那么鼠标移入再移出计时器就彻底停止，自动轮播效果就没了，所以要在这里加上重新启动，保证自动轮播效果在鼠标移出后还能继续。
s = setInterval(function(){
that.onLis();计时器中的轮播方向只能有一个，要么向左要么向右，如果两个方向都写就不起作用了
that.Next();
},2000)
}
此处添加计时器在鼠标移入停止;前面声明的变量s在这里使用
this.hB.onmouseover = function(){
clearInterval(s);
}
}
整合事件绑定方便统一调用
eventBind(){
let that = this;
调用自动轮播效果
this.Auto();
左箭头按钮绑定向左切换效果
this.hLeft.onclick = function(){
that.Left();
}
右箭头按钮绑定向右切换效果
this.hNext.onclick = function(){
that.Next();
}
调用li点击切换背景图事件
this.onLis();
}
}
let a = new Pic(hB,hNext,hLeft,hLis);
传参顺序不能乱，要和类内部constructor一致，调用函数不能少，this要齐全，遇到事件体要存一个this；
1099
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
