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函數時注意語法