一、animate.css文件

是一个动画库：放着很多很多的动画。

如何使用：

1、打开百度：搜索animate.css 得到网址
    http://www.animate.net.cn/
    https://animate.style/
2、下载 - 你们不用做这个操作
3、引入此文件
4、挑选你喜欢的动画，把class放到那个元素上
5、并且要记得设置上animation-duration:3s; 执行时长
6、还需要根据不同的动画，设置不同的初始效果，才会更好看

二、swiper插件

专门的一个轮播插件，提供了你HTML/CSS/JS，我们只需要复制。

三、对象

3.1 面向对象三大特点：封装、继承、多态

3.2 开发方式

1. 面向过程：过程 - 开始->结束
2. 面向对象：对象（属性和方法），js万物皆对象

四、封装/创建/定义自定义对象

直接量方式：

var obj={
        "属性名":属性值,
        ...,
        "方法名":function(){操作},//可以简化为箭头函数
        ...
}

属性名和方法名的""可以不加
访问对象的属性和方法：
obj.属性名; === obj["属性名"];
obj.方法名(); === obj"方法名";
js中一切都是对象，除了undefined和null，一切对象的底层都是hash数组
访问到不存在的属性，返回undefined
添加新属性和新方法:obj.属性名=新值;obj.方法名=function(){};
如果我希望遍历出对象所有的东西，必须使用for in，obj[i]才能拿到
如果你希望在对象的方法里，使用对象自己的属性，写为this.属性名
构造函数之中this指向当前正在创建的对象

预定义构造函数方式：

var obj=new Object();//空对象
//需要自己后续慢慢添加属性和方法
obj.属性名=新值;
obj.方法名=function(){};

自定义构造函数方式：

创建自定义构造函数

function 类名(name,age,hobby){
        this.name=name;
        this.age=age;
        this.hobby=hobby;
}
//千万不要在里面创建方法，每个对象都会创建出一个相同的方法，浪费内存

调用构造函数创建对象

var obj=new 类名(实参,...);

面向对象的优点：
1. 所有的属性和方法都保存在一个对象之中 - 更符合现实更有意义
2. 每个功能特地分开写 - 便于以后维护
3. 铁锁链舟 - 一个方法触发多个方法联动

五、继承

父对象的成员（属性和方法），子对象可以直接使用

为什么要继承：代码重用！提高代码的复用性，节约了内存空间！提升了网站的性能！
何时继承：只要多个子对象公用的属性和【方法】，都要集中定义在父对象之中
如何找到原型对象（父对象）：保存了一类子对象共有属性和共有方法
1. 对象名.proto; //必须先有一个对象
2. 构造函数名.prototype;//构造函数名几乎人人都有，除了Math和Window

六、原型链

每个对象都有一个属性：__proto__，可以一层一层的找到每个人的父亲，形成的链式结构，就称之为叫做原型链

可以找到父对象的成员（属性和方法），作用：找共有属性和共有方法
最顶层的是Object的原型、上面放着一个方法toString

七、练习

<!-- 开关门效果 - 封装对象 -->
<button id="btn" style="background-color: #df6215;">···</button>
<div id="box"></div>
<script>
    var door = {
        'btn' : document.querySelector('button'),
        'div' : document.querySelector('div'),
        'init' : function () {//初始化
            this.bind()
        },
        'bind' : function () {
            var me = this//留住this
            this.btn.onclick = function () {
                me.animate(this)
            }
        },
        animate : function (btn) {
            if (btn.style.backgroundColor == 'rgb(223, 98, 21)') {
                btn.style.backgroundColor = '#666'
                this.div.style.display = 'block'
            } else {
                btn.style.backgroundColor = '#df6215'
                this.div.style.display = 'none'
            }
        }
    }
    door.init()
</script>
<!-- 开关门效果 - 面向对象 -->
<section id="sec1">
    <button id="btn" style="background-color: #df6215;">···</button>
    <div id="box"></div>
</section>
<section id="sec2">
    <button id="btn" style="background-color: #df6215;">···</button>
    <div id="box"></div>
</section>
<script>
    function door(parent) {
        this.btn = parent.querySelector('button')
        this.div = parent.querySelector('div')
    }
    door.prototype.init = function () {
        this.bind()
    }
    door.prototype.bind = function () {
        var me = this//留住this
        this.btn.onclick = function () {
            me.animate(this)
        }
    }
    door.prototype.animate = function (btn) {
        if (btn.style.backgroundColor == 'rgb(223, 98, 21)') {
            btn.style.backgroundColor = '#666'
            this.div.style.display = 'block'
        } else {
            btn.style.backgroundColor = '#df6215'
            this.div.style.display = 'none'
        }
    }
    var door1 = new door(sec1)
    door1.init()
    var door2 = new door(sec2)
    door2.init()
</script>

<!-- 选项卡 - 封装对象版 -->
<ul>
    <li class="active" dy="0">家电</li>
    <li dy="1">数码</li>
    <li dy="2">超市</li>
    <li dy="3">建材</li>
    <li dy="4">维修</li>
</ul>
<div class="active">家电</div>
<div>数码</div>
<div>超市</div>
<div>建材</div>
<div>维修</div>
<script>
    var tabs = {
        lis : document.querySelectorAll('li'),
        divs : document.querySelectorAll('div'),
        init : function () {
            this.bind()
        },
        bind : function () {
            this.lis.forEach((li,i) => {
                li.onclick = (e) => {
                    this.animate(e.target,i)
                }
            })
        },
        animate : function (li,i) {
            this.lis.forEach(li => li.className = '')
            this.divs.forEach(div => div.className = '')
            li.className = 'active'
            this.divs[i].className = 'active'
        }
    }
    tabs.init()
</script>
<!-- 选项卡 - 面向对象版 -->
<section id="sec1">
    <ul>
        <li class="active" dy="0">家电</li>
        <li dy="1">数码</li>
        <li dy="2">超市</li>
        <li dy="3">建材</li>
        <li dy="4">维修</li>
    </ul>
    <div class="active">家电</div>
    <div>数码</div>
    <div>超市</div>
    <div>建材</div>
    <div>维修</div>
</section>
<section id="sec2">
    <ul>
        <li class="active" dy="0">家电</li>
        <li dy="1">数码</li>
        <li dy="2">超市</li>
        <li dy="3">建材</li>
        <li dy="4">维修</li>
    </ul>
    <div class="active">家电</div>
    <div>数码</div>
    <div>超市</div>
    <div>建材</div>
    <div>维修</div>
</section>
<script>
    function tabs(parent) {
        this.lis = parent.querySelectorAll('li')
        this.divs = parent.querySelectorAll('div')
    }
    tabs.prototype.init = function () {
        this.bind()
    }
    tabs.prototype.bind = function () {
        this.lis.forEach((li,i) => {
            li.onclick = (e) => {
                this.animate(e.target,i)
            }
        })
    }
    tabs.prototype.animate = function (li,i) {
        this.lis.forEach(li => li.className = '')
        this.divs.forEach(div => div.className = '')
        li.className = 'active'
        this.divs[i].className = 'active'
    }
    var tab1 = new tabs(sec1)
    tab1.init()
    var tab2 = new tabs(sec2)
    tab2.init()
</script>

<!-- 淡出淡入轮播 - 封装对象版 -->
<div class="carousel">
    <div class="img_box">
        <img src="./img/banner1.jpg" alt="" class="active">
        <img src="./img/banner2.jpg" alt="">
        <img src="./img/banner3.jpg" alt="">
    </div>
    <img src="./img/banner3.jpg" alt="">
    <button><</button>
    <button>></button>
    <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    var carousel = {
        div : document.querySelector('.carousel'),
        btns: document.querySelectorAll('button'),
        lis: document.querySelectorAll('li'),
        imgs: document.querySelectorAll('.img_box>img'),
        j: 0,
        timer : null,
        init: function () {
            this.bind()
            this.setInterval()
        },
        bind: function () {
            var me = this
            this.btns.forEach(btn => {
                btn.onclick = function () {
                    if (this.innerText == '>') {
                        me.animate(1)
                    } else {
                        me.animate(-1)
                    }
                }
            })
            this.lis.forEach((li,i) => {
                li.onclick = function () {
                    me.animate(0,i)
                }
            })
            this.div.onmouseover = function () {
                me.clearInterval()
            }
            this.div.onmouseout = function () {
                me.setInterval()
            }
        },
        animate: function (num,i) {
            if (num) {
                this.j += num
                if (this.j == this.imgs.length) {this.j = 0}
                if (this.j == -1) {this.j = this.imgs.length - 1}
            } else {
                this.j = i
            }
            this.clear()
            this.imgs[this.j].className = 'active'
            this.lis[this.j].className = 'active'
        },
        clear : function () {
            this.imgs.forEach(img => img.className = '')
            this.lis.forEach(li => li.className = '')
        },
        setInterval : function () {
            this.timer = setInterval(() => {
                this.animate(1)
            },1000)
        },
        clearInterval : function () {
            clearInterval(this.timer)
        }
    }
    carousel.init()
</script>
<!-- 淡入淡出轮播 - 面向对象版 -->
<div class="carousel1" id="car1">
    <div class="img_box">
        <img src="./img/banner1.jpg" alt="" class="active">
        <img src="./img/banner2.jpg" alt="">
        <img src="./img/banner3.jpg" alt="">
    </div>
    <img src="./img/banner3.jpg" alt="">
    <button><</button>
    <button>></button>
    <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    function carousel(parent) {
        this.div = document.querySelector('.carousel1')
        this.btns = parent.querySelectorAll('button')
        this.lis = parent.querySelectorAll('li')
        this.imgs = parent.querySelectorAll('.img_box>img')
        this.j = 0
        this.timer = null
    }
    carousel.prototype.init = function () {
        this.bind()
        this.setInterval()
    }
    carousel.prototype.bind = function () {
        var me = this
        this.btns.forEach(btn => {
            btn.onclick = function () {
                if (this.innerText == '>') {
                    me.animate(1)
                } else {
                    me.animate(-1)
                }
            }
        })
        this.lis.forEach((li,i) => {
            li.onclick = function () {
                me.animate(0,i)
            }
        })
        this.div.onmouseover = function () {
            me.clearInterval()
        }
        this.div.onmouseout = function () {
            me.setInterval()
        }
    }
    carousel.prototype.animate = function (num,i) {
        if (num) {
            this.j += num
            if (this.j == this.imgs.length) {this.j = 0}
            if (this.j == -1) {this.j = this.imgs.length - 1}
        } else {
            this.j = i
        }
        this.clear()
        this.imgs[this.j].className = 'active'
        this.lis[this.j].className = 'active'
    }
    carousel.prototype.clear = function () {
        this.imgs.forEach(img => img.className = '')
        this.lis.forEach(li => li.className = '')
    }
    carousel.prototype.setInterval = function () {
        this.timer = setInterval(() => {
            this.animate(1)
        },1000)
    }
    carousel.prototype.clearInterval = function () {
        clearInterval(this.timer)
    }
    var carousel1 = new carousel(car1)
    carousel1.init()
</script>

<script>
// 购物车 - 封装对象版
var car = {
    btns : document.querySelectorAll('tbody button'),
    trs : document.querySelectorAll('tbody tr'),
    inint : function () {
        this.getTotal()
        this.bind()
    },
    bind : function () {
        var me = this
        this.btns.forEach(btn => {
            btn.onclick = function () {
                if (this.innerText == '+') {
                    me.animate(this,1)
                } else {
                    me.animate(this,-1)
                }
            }
        })
    },
    animate : function (btn,val) {
        if (val == 1) {
            var num = btn.previousElementSibling
        } else {
            var num = btn.nextElementSibling
        }
        var price = btn.parentNode.previousElementSibling
        var sum = btn.parentNode.nextElementSibling
        var j = parseInt(num.innerText) + val
        if (j > 0) {
            num.innerText = j
        }
        sum.innerText = price.innerText * num.innerText
        this.getTotal()
    },
    getTotal : function () {
        var tot = 0
        this.trs.forEach(tr => {
            tot += parseInt(tr.lastElementChild.innerText)
        })
        total.innerText = tot
    }
}
car.inint()
</script>
<script>
// 购物车 - 面向对象
function car(parent) {
    this.btns = parent.querySelectorAll('tbody button')
    this.trs = parent.querySelectorAll('tbody tr')
}
car.prototype.init = function () {
    this.getTotal()
    this.bind()
}
car.prototype.bind = function () {
    var me = this
    this.btns.forEach(btn => {
        btn.onclick = function () {
            if (this.innerText == '+') {
                me.animate(this,1)
            } else {
                me.animate(this,-1)
            }
        }
    })
}
car.prototype.animate = function (btn,val) {
    if (val == 1) {
        var num = btn.previousElementSibling
    } else {
        var num = btn.nextElementSibling
    }
    var price = btn.parentNode.previousElementSibling
    var sum = btn.parentNode.nextElementSibling
    var j = parseInt(num.innerText) + val
    if (j > 0) {
        num.innerText = j
    }
    sum.innerText = price.innerText * num.innerText
    this.getTotal()
} 
car.prototype.getTotal = function () {
    var tot = 0
    this.trs.forEach(tr => {
        tot += parseInt(tr.lastElementChild.innerText)
    })
    total.innerText = tot
}
var car1 = new car(c1)
car1.init()
</script>

Javascript - day16+day17

一、animate.css文件

二、swiper插件

三、对象

3.1 面向对象三大特点：封装、继承、多态

3.2 开发方式

四、封装/创建/定义自定义对象

五、继承

六、原型链

七、练习