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(视频与PPT)
Dec 27 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
JavaScript实现无限轮播效果
Nov 19 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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长字符串定义方法
2012/07/12 PHP
php实现RSA加密类实例
2015/03/26 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
基于django传递数据到后端的例子
2019/08/16 Python
python实现小世界网络生成
2019/11/21 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
Pycharm调试程序技巧小结
2020/08/08 Python
python利用opencv实现颜色检测
2021/02/23 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
HTML5 新事件 小结
2009/07/16 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
yy婚礼主持词
2014/03/14 职场文书
租房协议书范文
2014/08/20 职场文书
停车位租赁协议书
2014/09/24 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
中学生打架检讨书
2014/10/13 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
学前班语言教学计划
2015/01/20 职场文书
护士个人总结范文
2015/02/13 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书