APIs Day2【课堂案例】随机点名&轮播图完整
tips
- 小技巧：去除字符串左右的空格
trim()方法
一、随机点名
点击查看素材的代码
<!-- 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>
<!-- body -->
<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 = ['马超', '黄忠', '赵云', '关羽', '张飞']
</script>
<script>
// 数据数组
const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
// 定时器 和 随机号 的全局变量
let timerId = 0
let random = 0
// 业务1 开始按钮模块
// 1.1 获取开始按钮和名字显示位置对象
const qs = document.querySelector('.qs')
const start = document.querySelector('.start')
// 1.2 添加点击事件
start.addEventListener('click', function () {
// 开始后禁用按钮，结束的时候在启用，就可以避免点击多次开始后停不下来
// 设置开始按钮禁用
start.disabled = true
// 1.3 设置定时器
timerId = setInterval(function () {
// 随机数
random = parseInt(Math.random() * arr.length)
qs.innerHTML = arr[random]
}, 35)
// 如果数组里只有一个值了，就直接展示不需要再闪了，并且禁用两个按钮
if (arr.length === 1) {
start.disabled = end.disabled = true
}
})
// 业务2 关闭按钮模块
const end = document.querySelector('.end')
end.addEventListener('click', function () {
clearInterval(timerId)
// 结束时删除掉当前抽取的那个数组元素
arr.splice(random, 1)
// 开启开始按钮
start.disabled = false
console.log(arr);
})
</script>
二、轮播图完整版
知识点：
- 其中的自动轮播用上今天的知识点
click方法。 - “鼠标离开大盒子”里的代码没有删除“停止定时器：
- 这是一个好习惯，有个经验就是 定时器 要 先关后开
- 原因是：存在特殊情况 - 可能鼠标快速进入和离开，导致在 mouseleave 清除定时器之前又触发了 mouseenter 。所以若没有额外保障，新定时器可能在旧定时器被清除之前被设置，从而导致多个定时器并发运行（即避免重复的定时器导致的运行问题）
点击查看素材代码
<!-- 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>
<!-- body -->
<body>
<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>
<!-- 添加JS代码位置 -->
</body>
<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')
// 1. 右按钮业务
// 1.1 获取右侧按钮
const next = document.querySelector('.next')
let i = 0
// 1.2 注册点击事件
next.addEventListener('click', function () {
// console.log('11')
i++
// 1.6 判断条件 如果大于数组长度 就复原为0
i = i >= sliderData.length ? 0 : i
// 1.3 得到对应的对象
// console.log(sliderData[i])
// 调用函数
toggle()
})
// 2. 左侧按钮业务
// 2.1 获取左侧按钮
const prev = document.querySelector('.prev')
// 2.2 注册点击事件
prev.addEventListener('click', function () {
i--
// 判断条件
i = i < 0 ? sliderData.length - 1 : i
// 1.3 得到对应的对象
// console.log(sliderData[i])
toggle()
})
// 声明一个渲染的函数作为复用
function toggle() {
// 1.4 渲染对应的数据
img.src = sliderData[i].url
p.innerHTML = sliderData[i].title
footer.style.backgroundColor = sliderData[i].color
// 1.5 更换小圆点 先移除原来的类名，当前li再添加 这个 类名
document.querySelector('.slider-indicator .active').classList.remove('active')
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}
// 3. 自动播放模块
let timerId = setInterval(function () {
// 利用js自动调用点击事件 click() 这里一定要加小括号调用函数
next.click()
}, 1000)
// 4. 鼠标经过大盒子，停止定时器
const slider = document.querySelector('.slider')
// 注册事件
slider.addEventListener('mouseenter', function () {
// 停止定时器
clearInterval(timerId)
})
// 5. 鼠标离开大盒子，开启定时器
slider.addEventListener('mouseleave', function () {
// 停止定时器
clearInterval(timerId)
// 开启定时器
// 注意这里timerId的值仍要获取
timerId = setInterval(function () {
// 利用js自动调用点击事件 click() 这里一定要加小括号调用函数
next.click()
}, 1000)
})
</script>
浙公网安备 33010602011771号