javascript实现随机抽奖功能

 更新时间:2020年12月30日 18:17:29   作者:彴兖  
这篇文章主要为大家详细介绍了javascript实现随机抽奖功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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);
}

实现的最终效果图如下:

当点击开始时:

当点击暂停时:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JavaScript 事件对内存和性能的影响

    JavaScript 事件对内存和性能的影响

    本文主要介绍了JavaScript 事件对内存和性能的影响。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 深入浅析javascript函数中with

    深入浅析javascript函数中with

    这篇文章主要介绍了javascript函数中with,with函数方便用来引用某个对象中已有的属性,但是不能用来给对象添加属性,要给对象创建新的属性,下面通过代码给大家讲解,需要的朋友可以参考下
    2018-10-10
  • 小程序视频列表中视频的播放与停止的示例代码

    小程序视频列表中视频的播放与停止的示例代码

    本篇文章主要介绍了小程序视频列表中视频的播放与停止的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 单击某一段文字改写文本颜色

    单击某一段文字改写文本颜色

    单击某一段文字,改文字变为红色,再次单击之后,文字又变回黑色,示例如下,需要的朋友可以参考下
    2014-06-06
  • ES6中新增的Object.assign()方法详解

    ES6中新增的Object.assign()方法详解

    Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target ),下面这篇文章主要给大家介绍了关于ES6中新增的Object.assign()方法的相关资料,需要的朋友可以参考下。
    2017-09-09
  • XMLHttpRequest对象_Ajax异步请求重点(推荐)

    XMLHttpRequest对象_Ajax异步请求重点(推荐)

    下面小编就为大家带来一篇XMLHttpRequest对象_Ajax异步请求重点(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JavaScript支持的最大递归调用次数分析

    JavaScript支持的最大递归调用次数分析

    这篇文章主要介绍了JavaScript支持的最大递归调用次数分析,也称JavaScript支持的最大堆栈数量,需要的朋友可以参考下
    2014-06-06
  • JS实现弹幕小案例

    JS实现弹幕小案例

    这篇文章主要为大家详细介绍了JS实现弹幕小案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • Bootstrap Table服务器分页与在线编辑应用总结

    Bootstrap Table服务器分页与在线编辑应用总结

    这篇文章主要介绍了Bootstrap Table服务器分页与在线编辑应用总结 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • mock.js实现模拟生成假数据功能示例

    mock.js实现模拟生成假数据功能示例

    这篇文章主要介绍了mock.js实现模拟生成假数据功能,结合实例形式分析了mock.js插件生成模拟数据的相关操作技巧,需要的朋友可以参考下
    2019-01-01

最新评论