javascript实现随机抽奖功能


Posted in Javascript onDecember 30, 2020

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 相关文章推荐
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
学习面向对象之面向对象的术语
Nov 30 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 #jQuery
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 #Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 #Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 #Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 #Vue.js
js+html+css实现手动轮播和自动轮播
Dec 30 #Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 #jQuery
You might like
php利用递归实现删除文件目录的方法
2016/09/23 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
eval与window.eval的差别分析
2011/03/17 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
彪马日本官网:PUMA日本
2019/01/31 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
几道PHP的面试题
2012/05/19 面试题
执行力心得体会
2013/12/31 职场文书
成考报名单位证明范本
2014/01/16 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
啤酒节策划方案
2014/05/28 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
七年级作文之环保作文
2019/10/17 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis