前端开发
·2024-12-17Day3 结合所学，仿学习通制作一个随机抽人案例
思路：
1、页面设计：有一个显示框和一个按钮
2、按下开始按钮后，将开始随机播放图像和文字，同时开始按钮将演变成结束按钮
3、按下结束按钮将停止播放
实现代码：
<body>
<div class="head_img"></div>
<div class="name">姓名</div>
<div class="button">
<button class="open">开始</button>
<button class="stop">结束</button>
</div>
<script>
const data = [
{ img: 'image/tu1.png', name: '老王' },
{ img: 'image/tu2.png', name: '小二' },
{ img: 'image/tu3.png', name: '张三' },
{ img: 'image/tu4.png', name: '李四' },
{ img: 'image/tu5.png', name: '王五' },
{ img: 'image/tu6.png', name: '赵六' }
]
let timer = 0
const start = document.querySelector('.open')
const stop = document.querySelector('.stop')
const img = document.querySelector('.head_img')
const name = document.querySelector('.name')
start.addEventListener('click', function () {
timer = setInterval(function () {
let random = parseInt(Math.random() * data.length)
name.innerHTML = data[random].name
img.style.backgroundImage = `url(${data[random].img})`
}, 100)
start.style.display = 'none'
stop.style.display = 'block'
})
stop.addEventListener('click', function () {
clearInterval(timer)
stop.style.display = 'none'
start.style.display = 'block'
})
</script>
</body>
难点：
实现单一按钮的交互效果
解决方案：
1、用一个大盒子将两个按钮给包裹起来
2、对两个按钮分别添加点击事件，实现显示状态的互相转换
4
0
分享
操作
评论
问答助学
相关内容
0个评论
全部评论
点击登录，快来和大家讨论吧～
表情
图片
暂无评论
