接下来，继续开发：
第一步，先渲染抽奖人员名字列表：
新建index.js并引入到页面内<script src="./js/index.js"></script>
下面是index.js代码
//先定义一个数组
var array = ['刘春红', '黄雪', '赵茜',
'侯红霞', '滕瑶', '李忠宝', '蒋月悦', '李佳美',
'陈洪霞', '郭继', '王国芽', '李万梅', '张洪嘉',
'王思棋', '徐雨轩', '张晓', '李静','任永浩','乔自静','杨柯','唐雨','苗依依',
'李媚琴','李天梅','孙圆圆','王涛','罗心月','段春梅','文萍',
'袁仕琴','方娅兰','余珊','朱路林','龚俊杰','范国良'];
//然后获取我们的`ul`dom元素
var ul = document.getElementById('_ul');;
//然后动态创建li，并且使用appendChild添加到我们的`ul`dom元素下
//创建元素用什么？是不是 document.createElement('li')
//好，那么添加元素是什么方法啊？是不是appendChild呀！
//对，添加到哪里呢？是不是ul下面啊。
//那么使用刚才获取的ul.appendChild(xxx)是不是就可以啊
//xxx是什么，很明显是document.createElement('li')
//我们不能只添加一个li呀，页面内有很多人员，就有很多li
//所以我们要循环遍历我们刚才定义的数组array
//一般我们会定义一个方法，比如我们教init
function init(){
//动态创建li
for(var i = 0;i<array.length; i++){
var oli = doeument.createElement('li');
ul.appendChild(oli)
//只创建了但是没有文字，是不行的，对吧
//使用innerHTML或者innerText赋值
oli.innerText = array[i]
}
}
init();
image.png
下面，继续，两个按钮，停止抽奖按钮是默认隐藏的，四张图片默认是隐藏的。
.stop,#img1,#img2,#img3,#img4{
display: none;
}
那就隐藏下，先给两个按钮各加一个id
<button class="start" id="start">开始抽奖</button>
<button class="stop" id="stop">停止抽奖</button>
然后继续在index.js内写代码
//先获取两个按钮
var startBtn = document.getElementById('start');
var stopBtn = document.getElementById('stop');
下面应该怎么做呢，是不是要点击开始抽奖按钮了啊。
//监听开始按钮的点击事件
//监听事件用什么啊，还有同学记得吗？是不是 addEventListener 啊
startBtn.addEventListener('click',()=>{
})
//我们可以测试下，我们的事件监听是不是好使，我们在回调函数里弹出一个 `alert(1)`
//经过测试，是可以的，那么我们继续往下写，来看演示网页，我们先不管上面的随机数，先看按钮和图片的变化
//好，我们可以看到点击开始按钮后，开始按钮变成禁用状态，2到3秒后右侧图片出现，来了老弟 音频开始播放，10秒后停止抽奖按钮出现
//ok，下面我们就来实现这个几个需求
//开始按钮变成禁用状态
start.disabled = true
//手型变成禁止点击的样式
startBtn.style.cursor = 'no-drop'
//2到3秒后右侧图片出现
setTimeout(() => {
}, 2500)
定时器写好了，图片用什么获取啊？
setTimeout(() => {
var img2 = document.getElementById('img2')
//img2.style.display = 'block'
img2.style.opacity = '1'
}, 2500)
//下面实现 来了老弟 音频开始播放
var music1 = document.getElementById('music1')
music1.play()
//实现10秒后停止按钮出现
setTimeout(() => {
stopBtn.style.display = 'inline-block'
stopBtn.style.opacity = '1'
}, 10000)
图片出现的太突兀，同样的 利用 js 动态添加animated bounceIn
img2.className = 'animated bounceIn'
image.png
接下里，我们来实现随机抽奖效果。
//先来分析下，抽奖的时候，名字的li是不是随机加了一个选中效果啊，我们先来写一个active选中的style样式。
.active {
background-color: #f1084a;
}
然后写js，首先他是一个循环定时器setInterval
//随机数Math.random()，取随机数组长度内的随机整数Math.floor(Math.random() * array.length);
setInterval(()=>{
var random = Math.floor(Math.random() * array.length);
console.log(random);
//拿到ul的下的随机的子元素用什么 ul.children[random]
//在动态添加active类名之前 要把所有的li的active类名先清空
for(var i = 0; i < array.length; i++) {
ul.children[i].className = '';
}
ul.children[random].className = 'active';
},50)
ok，我们已经实现了随机抽奖，下面实现点击停止抽奖按钮的功能需求
老规矩，先来分析下，监听停止按钮点击事件后，左侧图片出现，网页两侧图片出现，随机数 定时器 关闭，并显示中奖人姓名替换幸运者文字，停止第一个音乐，响起第二个中奖的音乐
现在开始编码
//监听停止按钮点击事件
stopBtn.addEventListener('click',()=>{
//左侧图片出现
var img1 = document.getElementById('img1')
img1.style.opacity = '1'
img1.className = 'animated bounceIn'
//第一个音乐停止
var music1 = document.getElementById('music1')
music1.pause()
//第二个音乐播放
var music2 = document.getElementById('music2')
music2.play()
//随机数 定时器 关闭
clearInterval(timer)
//并显示中奖人姓名替换`幸运者`文字
//首先要找到className叫active的元素
var active = document.getElementsByClassName('active')[0]
var lucking = document.getElementsByClassName('lucking')[0]
lucking.innerText = active.innerText
//左右两侧图片出现
var img3 = document.getElementById('img3')
var img4 = document.getElementById('img4')
img3.style.opacity = 1
img4.style.opacity = 1
img3.className = 'animated bounceIn'
img4.className = 'animated bounceIn'
})
image.png
END！！！
