原生js之抽奖系统网页开发（二）

接下来，继续开发：

第一步，先渲染抽奖人员名字列表：

新建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！！！