javascript实现随机抽奖，供大家参考，具体内容如下

首先创建一个数组用于存放抽奖的参与者：

var arr=['张三','波波','kk','莉莉','张三丰','刘德华','周杰困','你那儿','zhere','好的'];

给开始和结束按钮div添加点击事件：

//添加点击开始则开始循环播放
document.getElementById("start").addEventListener("click",va);
//点击停止则停止播放并显示恭喜中奖
document.getElementById("end").addEventListener("click",function (){
  count++;
  clearTimeout(i);
  var name=arr[thisone];
  arr.splice(thisone,1);
  var get=document.getElementById("get");
  get.innerHTML=get.innerHTML+'<br>';
  get.innerText=get.innerText+`${count}. `+name;
})

用setTimeout实现循环事件，每隔100毫秒就执行一次循环，随机得到存放参与者的数组的长度之间的随机数，不断修改innerText实现用户滚动效果：

//循环事件
function va(){
  let num=arr.length;
  console.log(num);
  if(num===0){
    clearTimeout(i);
    //移除开始事件
    document.getElementById("start").removeEventListener("click",va);
    document.getElementById("show").innerText="没有了";
    return;
  }
  setTimeout("show()",100);
}

//获得当前名字下标
function getindex() {
  return parseInt(Math.random()*arr.length);
}
//循环播放列表
function show(){
  thisone=getindex();
  document.getElementById("show").innerText=arr[thisone];
  i=setTimeout("show()",100);
}

实现的最终效果图如下：

当点击开始时：

当点击暂停时：

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用vue怎样做拖拽排序的功能？

  本文给大家分享用vue怎样做拖拽排序的功能，小编觉得比较实用，因此分享给大家做个参考，实现效果及代码如下，这里提供一种简单的实现方案，感兴趣的朋友可以了解看看。

• 用vue怎么写下拉框二级联动效果，具体过程是怎样

  这篇文章主要介绍了vue实现下拉框二级联动效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• 用JS如何实现reset重置表单事件

  我们都知道form表单中有一个默认的reset重置表单事件，你一定会很熟悉，后面我也会对reset事件使用详细解释，请先看下面的代码。 inputtype=reset 为什么有了reset按钮了，我们还要使用js或jquery来实现reset事件呢？这是因为有时候我们form表单提交完数据之

• Echats图表自适应屏幕大小的问题怎么解决

  很多时候我们需要用图表来制作我们统计的数据直观的分析,所以我们可以用Echarts来制作图表,这篇文章主要给大家介绍了关于Echats图表大屏自适应的实现方法,需要的朋友可以参考下

• vue插槽的优点是什么？vue插槽如何使用？

  本文给大家介绍vue插槽，对于vue插槽我们之前也有了解过，本文就给大家来介绍一下vue插槽的好处和vue插槽的使用，感兴趣的朋友可以了解看看，那么接下来就跟随小编来学习一下吧。