APIs案例及知识点串讲(上)

一.轮播图专题

CSS代码

<style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>

随机轮播图

  <div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div></div><script>// const arr = [1, 3]// arr[0]// 1. 初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },]const random = parseInt(Math.random() * sliderData.length)const img = document.querySelector('.slider-wrapper img')img.src = sliderData[random].urlconst p = document.querySelector('.slider-footer p')p.innerHTML = sliderData[random].titleconst footer = document.querySelector('.slider-footer')footer.style.backgroundColor = sliderData[random].colorconst li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)li.classList.add('active')</script>

知识点凝练：

1. 随机抽取数组中元素值

    const random = Math.floor(Math.random() * arr.length)

2. 选择匹配的第一个元素

参数: 包含一个或多个有效的CSS选择器  字符串

返回值：CSS选择器匹配的第一个元素,一个HTMLElement对象。如果没有匹配到，则返回null

3.通过style属性操作CSS

注意：

1.修改样式通过style属性引出

2.如果属性有-连接符，需要转换为小驼峰命名法

3.赋值的时候，需要的时候不要忘记加css单位

4.值一定是个字符串

定时轮播图

<div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">< </button><button class="next">></button></div></div></div><script>// 1. 初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },]const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const footer = document.querySelector('.slider-footer')let i = 0  //信号量：控制图片张数setInterval(function () {i++//无缝衔接位置if (i >= sliderData.length) {i = 0}img.src = sliderData[i].urlp.innerHTML = sliderData[i].titlefooter.style.color = sliderData[i].color//小圆点//先删除以前的activedocument.querySelector('.slider-indicator .active').classList.remove('active')//只让当前li添加activedocument.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}, 1000)</script>

案例叮嘱：注意小圆点的处理方式 

通过classList操作类控制CSS(重点)

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

切换类：有就删掉，没有就加上

完整版轮播图 

<div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">< </button><button class="next">></button></div></div></div><script>// 1. 初始数据const data = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },]const next = document.querySelector('.next')const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const footer = document.querySelector('.slider-footer')let i = 0 // 信号量控制图片播放张数next.addEventListener('click', function () {i++if (i >= data.length) i = 0//调用函数common()})const prev = document.querySelector('.prev')prev.addEventListener('click', function () {i--if (i < 0) i = data.length - 1//调用函数common()})//声明一个渲染函数作为复用function common() {img.arc = data[i].urlp.innerHTML = data[i].titlefooter.style.backgroundColor = data[i].colordocument.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}//自动播放let n = setInterval(function () {//利用js自动调用点击事件  click() 一定要加小括号next.click()}, 1000)//鼠标经过大盒子停止计时器const slider = document.querySelector('.slider')slider.addEventListener('mouseenter', function () {clearInterval(n)})//鼠标离开大盒子开启计时器slider.addEventListener('mouseleave', function () {clearInterval(n)n = setInterval(function () {//利用js自动调用点击事件  click() 一定要加小括号next.click()}, 1000)})</script>

 案例叮嘱：

1.当两个事件监听代码大部分一样时，可以把公共部分提取封装成一个新函数，从而可以有效简化代码

2.利用js自动调用点击事件  click() 一定要加小括号

3.当鼠标离开大盒子开启计时器时，一定不能省略n，因为如果不加n下次开启计时器时就是一个新的计时器就关不掉了；一定不能加上let，因为把let加上之后就成了局部变量，外部就再也关不了这个计时器了。还有就是此时先关再开计时器

 n = setInterval(function () { next.click() }, 1000)

二.随机点名案例

CSS代码

<style>* {margin: 0;padding: 0;}h2 {text-align: center;}.box {width: 600px;margin: 50px auto;display: flex;font-size: 25px;line-height: 40px;}.qs {width: 450px;height: 40px;color: red;}.btns {text-align: center;}.btns button {width: 120px;height: 35px;margin: 0 50px;}</style>

<h2>随机点名</h2><div class="box"><span>名字是：</span><div class="qs">这里显示姓名</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div><script>// 数据数组const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']let n = 0//声明定时器的全局变量//随机号也要全局变量let random = 0const start = document.querySelector('.start')const qs = document.querySelector('.qs')const end = document.querySelector('.end')start.addEventListener('click', function () {n = setInterval(function () {random = Math.floor(Math.random() * arr.length)qs.innerHTML = arr[random]}, 35)//如果数组里面只有一个值了，让两个按钮禁用就可以if (arr.length === 1) {start.disabled = end.disabled = true}})end.addEventListener('click', function () {clearInterval(n)arr.splice(random, 1)//注意splice函数写法})</script>

案例叮嘱：

1. 注意函数的作用域只在其内部，如果在别处还需要使用，则需将其升级为全局变量，这里的n和random两个全局变量使用let定义

2.要考虑到每次抽取完之后需要将抽取元素删除的情况，使用splice函数时注意语法

数组. splice() 方法 删除指定元素

· start 起始位置: 指定修改的开始位置（从0计数）

· deleteCount: 表示要移除的数组元素的个数

                        可选的。如果省略则默认从指定的起始位置删除到最后

3. 还需要考虑到当数组中只剩下一个值时，必须将两个按钮禁用

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加了该属性如果是false代表移除了该属性，比如：disabled、checked、selected