javascript实现随机抽奖功能

2024-10-02 01:53:30

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

实现的最终效果图如下：

当点击开始时：

当点击暂停时：

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

js抽奖实现随机抽奖代码效果

随机抽取,简单代码. 复制代码代码如下: <html> <title>随机抽奖程序</title> <head><meta http-equiv=Content-Type content="text/html; charset=gb2312"> </head> <body> <script type="text/javascript"> var alldata = &q
基于JavaScript实现简单的随机抽奖小程序

对于抽奖这样的小程序使用诸如VB,Delphi等工具来实现会比较的方便,由于本人机器上没有装这样的应用程序,所以只能另寻其道.为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行,开发工具和编译运行工具也能够经可能简单(诸如text文本即可编辑,window系统自带的浏览器即可编译运行的情况),决定尝试使用javascript来做.本人对javascript的研究不深,平时主要用于网站开发中对来自客户端的数据进行有效性判断(基于安全性的考虑,安全性要求高的网站尽量使用服务器端语言对数据有效
js实现随机抽奖

前言在前端的开发当中,我们肯定会遇到随机抽奖的需求.我们要怎么去实现呢?下面就来分享随机抽奖的JS代码,有需要的小伙伴可以复制到编译器当中运行查看效果. 随机抽奖的JS代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #wrap { text
js实现简单随机抽奖的方法

本文实例讲述了js实现简单随机抽奖的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <html> <title>js随机抽奖程序</title> <head><meta http-equiv=Content-Type content="text/html; charset=gb2312"> </head> <body> <script type="text/java
javascript 随机抽奖程序代码

随机抽奖程序请单击开始抽奖开始抽奖(S) 停止(O) [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
js实现简易的单数字随机抽奖（0-9）

本文分享的网页特效是一个可以控制开始停止的数字抽奖游戏,类似很多电视上那种数字抽奖游戏,下面就是我分享的全部代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>简易的单数字随机抽奖,抽取随机数的js特效代码</title> <
javascript实现随机抽奖功能

javascript实现随机抽奖,供大家参考,具体内容如下首先创建一个数组用于存放抽奖的参与者: var arr=['张三','波波','kk','莉莉','张三丰','刘德华','周杰困','你那儿','zhere','好的']; 给开始和结束按钮div添加点击事件: //添加点击开始则开始循环播放 document.getElementById("start").addEventListener("click",va); //点击停止则停止播放并显示恭喜中奖
JavaScript实现九宫格抽奖功能的示例代码

目录效果图实现流程主要代码效果图话不多说,直接上效果: 实现流程主要流程为: 1. 根据效果图,构建静态页面 2. 获取元素(自带的属性) 3. 绑定事件 4. 事件触发之后 4.1 所有的li元素在指定的时间间隔下颜色随机变化 4.2 延时器 2秒后清除定时器 4.3 在清除定时器之后,所有的li背景色复位,随机选一个主要代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch
基于JavaScript实现简单抽奖功能代码实例

为什么会做这个东西呢,纯属好玩,闲的其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答当时就想,我如果抽签抽到你了,你还是不回答吗??好吧,一切都是扯淡先来看看页面效果吧: 点击抽取就可以抽签了,红色框会显示内容,(PS:红色框是没有的,仅仅做描述) 抽取到的效果图如下,字体会随机滚动,最后停止: 里面的抽取内容完全可以替换,,,, 下面贴上代码: <!DOCTYPE html> <html lang="zh"> <head> &l
javascript HTML5 Canvas实现圆盘抽奖功能

我们经常参加各种电商优惠活动,比如购买达到一定数额进行抽奖活动,在比如微信抽奖,淘宝抽奖,迅雷赚钱宝圆盘抽奖活动等.这些抽奖活动部分就是由HTML5的Canvas来制作的,今天就为大家分享一下如何使用HTML5的Canvas来制作圆盘抽奖功能.老规矩,先看下效果图吧: 再来看看Canvas的几个主要api: 全部源代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&qu
jQuery实现图片随机切换、抽奖功能(实例代码)

效果图: 源代码: HTML: <body>  <div id="div1"> <img id="xiaoImgID" src="img/mei0.jpg"> </div>  <input id="startID" type="button" value="开始"
JS实现随机抽奖小功能

本文实例为大家分享了JS实现随机抽奖小功能的具体代码,供大家参考,具体内容如下点击开始按钮开始抽奖,div依次变红!下面是js代码,需要的自取 <script> var but1 = document.getElementById("btn1") var but2 = document.getElementById("btn2") var alldiv = document.querySelectorAl
javascript跑马灯抽奖实例讲解

本文实例讲解了javascript跑马灯抽奖特效,特别适合用于抽奖活动,分享给大家供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抽奖游戏</title> <style> #box{ width:720px; margin:0 auto; margin-top:20p

javascript实现随机抽奖功能

相关推荐

随机推荐