演示效果

JavaScript相关代码

<script>const personArr = ['周杰伦', '刘德华', '周星驰', '黎明', '张学友']   // 参与人员名单const prizeArr = ['first-prize', 'second-prize', 'third-prize']   // 奖项设置function getRaffleList(personArr = [], prizeArr = []) {let random = 0   // 随机整数const raffleList = new Array(prizeArr.length)    // 获奖人员名单// 产生获奖名单for (let i = 0; i < prizeArr.length; i++) {random = Math.floor(Math.random() * personArr.length)  // 产生一个随机整数，范围[0,personArr.length-1]raffleList[i] = { prize: prizeArr[i], uname: personArr[random] }  // 收集获奖人员名单  personArr.splice(random, 1)   // 删除已抽中人员}return raffleList}const raffleList = getRaffleList(personArr, prizeArr)   // 调用getRaffleList(),获取获奖人员名单// 进行数据渲染for (let i = 0; i < raffleList.length; i++) {const span = document.querySelector(`#${raffleList[i].prize}`)  // 获取span标签元素对象span.innerHTML = `${raffleList[i].uname}`}
</script>

HTML相关代码

<div><h3>获奖名单如下</h3><ul class="raffle-list"><li>一等奖: <span id="first-prize"></span></li><li>二等奖: <span id="second-prize"></span></li><li>三等奖: <span id="third-prize"></span></li></ul>
</div>

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta uname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li {list-style: none}</style>
</head><body><div><h3>获奖名单如下</h3><ul class="raffle-list"><li>一等奖: <span id="first-prize"></span></li><li>二等奖: <span id="second-prize"></span></li><li>三等奖: <span id="third-prize"></span></li></ul></div><script>const personArr = ['周杰伦', '刘德华', '周星驰', '黎明', '张学友']   // 参与人员名单const prizeArr = ['first-prize', 'second-prize', 'third-prize']   // 奖项设置function getRaffleList(personArr = [], prizeArr = []) {let random = 0   // 随机整数const raffleList = new Array(prizeArr.length)    // 获奖人员名单// 产生获奖名单for (let i = 0; i < prizeArr.length; i++) {random = Math.floor(Math.random() * personArr.length)  // 产生一个随机整数，范围[0,personArr.length-1]raffleList[i] = { prize: prizeArr[i], uname: personArr[random] }  // 收集获奖人员名单  personArr.splice(random, 1)   // 删除已抽中人员}return raffleList}const raffleList = getRaffleList(personArr, prizeArr)   // 调用getRaffleList(),获取获奖人员名单// 进行数据渲染for (let i = 0; i < raffleList.length; i++) {const span = document.querySelector(`#${raffleList[i].prize}`)  // 获取span标签元素对象span.innerHTML = `${raffleList[i].uname}`}</script>
</body></html>

JavaScript简单实现随机抽奖案例相关推荐

随机循环抽奖小程序_c语言,基于JavaScript实现简单的随机抽奖小程序
对于抽奖这样的小程序使用诸如VB,Delphi等工具来实现会比较的方便,由于本人机器上没有装这样的应用程序,所以只能另寻其道.为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行,开发工具和编译 ...
编写一个随机抽奖程序php,基于PHP实现简单的随机抽奖小程序
摘要:一个抽奖小程序,概论可控,也可某个奖品在前端显示,而程序中根本不可能获得!把所有的概率x10后相加起来,新数组中每项的值等于它前几个的和加上它本身.然后随即生成一个0到最大数之间的一个数,通过循 ...
原生JavaScript随机抽奖案例
案例需求:抽奖机中有多个不同的奖项,点击按钮开始进行随机抽奖,默认所有的奖项得到的概率是一致的. 页面布局:大致布一下,可根据喜好进行调整. <div><div class=&quo ...
android开发问卷调查案例_Android开发Handler的简单使用——随机点名案例
前言我们知道,Android的UI线程也叫主线程,工作线程(子线程)主要是负责执行耗时操作的线程,如果我们在子线程处理完事物后,需要通知UI线程更新界面.那么,子线程如何通知UI更新呢,这个就是通过 ...
简单php抽奖,基于PHP实现简单的随机抽奖小程序_PHP
一个抽奖小程序,概论可控,也可某个奖品在前端显示,而程序中根本不可能获得!把所有的概率x10后相加起来,新数组中每项的值等于它前几个的和加上它本身. 然后随即生成一个0到最大数之间的一个数,通过循环查 ...
JavaWeb——使用JavaScript实现随机抽奖
实验名称: 使用 JavaScript实现随机抽奖实验目的: 1. 掌握JavaScript的基本语法及定 ...
用Python制作一个随机抽奖小工具
最近在工作中面向社群玩家组织了一场活动,需要进行随机抽奖,参考之前小明大佬的案例,再结合自己的需求,做了一个简单的随机抽奖小工具. 今天我就来顺便介绍一下这个小工具的制作过程吧! 先看效果: 1. 核 ...
java随机抽题系统_JAVA程序设计题六：随机抽奖系统
给一同学写的实践周作业,发现好久没有写博客了,于是就分享出来,造福学弟学妹. 课题描述基于JAVA GUI编写一个简单的随机抽奖程序,具体实现功能如下: 1. 创建一个文本文件,其中存放若干条用户信 ...
Web APIs，BOM树，声明dom对象，年会抽奖案例，随机图片，表单，用户注册倒计时，innerHTNL，classList的使用
介绍严格意义上讲,我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系,ECMAScript 简称 ES 它提供了一套语言标准规范,如变量.数据类型.表达式.语 ...

JavaScript简单实现随机抽奖案例

演示效果

JavaScript相关代码

HTML相关代码

完整代码

JavaScript简单实现随机抽奖案例相关推荐

最新文章

热门文章