- 目录结构
- random
- image
图片.jpeg
index.html
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.random_main {
width: 100%;
box-sizing: border-box;
padding: 15px;
}
.random_main .but_box {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#start {
margin-right: 15px;
}
.random_name ul {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.random_name ul li {
list-style: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.random_name ul li img {
width: 100px;
height: 100px;
border-radius: 100px;
opacity: .5;
}
#big_img img {
width: 120px;
height: 120px;
border-radius: 120px;
opacity: 1;
}
</style>
</head>
<body>
<div class="random_main">
<div class="but_box">
<button id="start">开始</button>
</div>
<div class="random_name">
<ul></ul>
</div>
</div>
<script>
// 获取开始/结束按钮
let start = document.getElementById('start');
// 获取ul
let oUl = document.querySelector('.random_name ul');
// 图片名称的集合
let nameArr = ['小狗', '小马', '小猪', '小羊', '小牛', '小鸡', '小鸭', '王虎'];
// 遍历图片名称，根据图片的个数创建li标签
for (let i = 0; i < nameArr.length; i++) {
// 创建li标签
let oLi = document.createElement('li');
// 创建img标签
let oImg = document.createElement('img');
// 给img标签的src属性增加图片路径，图片格式统一jpeg
oImg.src = `./image/${nameArr[i]}${'.jpeg'}`;
// 创建span标签，展示图片名称
let oName = document.createElement('span');
// 给每个span标签添加相对应的名称
oName.innerText = nameArr[i];
// 将img标签插入的li标签内
oLi.appendChild(oImg);
// 将span标签插入到li标签内
oLi.appendChild(oName);
// 将li标签添加到ul标签内
oUl.appendChild(oLi);
};
// 开始按钮默认文案为“开始”，点击后变成“结束”
start.innerText = '开始';
// 定义计时器
let time;
// 定义flag状态，用来判断是开始状态还是结束状态
let flag = true;
// 按钮添加点击事件
start.onclick = function () {
// 判断是flag是否为true，为true则进行选择
if (flag) {
// 计时器开始，每80毫秒调取执行一次
time = setInterval(function () {
// 获取随机数，随机数范围是从0-名字的个数
oRandom = Math.floor(Math.random() * oUl.childNodes.length)
// 循环li标签，将li标签的id置空
for (let i = 0; i < oUl.childNodes.length; i++) {
oUl.childNodes[i].id = ''
}
// 把随机数作为下标寻找相应的li标签，并为其添加id
oUl.childNodes[oRandom].id = 'big_img'
}, 80)
// 将按钮文案改为“结束”
start.innerText = '结束'
// 将flag状态改为false
flag = false
} else {
// 如果flag状态为false，清除计时器
clearInterval(time)
// 将flag状态改为true
flag = true
// 将按钮文案改为“开始”
start.innerText = '开始'
}
};
</script>
</body>
</html>
