javaScript数组：点歌台、抽奖功能（分析+代码）

题目：点击开始按钮，进行随机抽取，点击停止按钮，确定抽到的人是谁（该思想可用于点歌、点名、抽奖系统）

效果图：

思路分析：

（1）创建一个数组arr，用来存放姓名名单

（2）创建一个点击事件，点击开始/停止按钮

（3）用 .innerText 的方法，更改开始和停止按钮显示的内容

（4）用setInterval（函数，间隔时间）去设置一个定时器timer，用来控制DIV中的名单多久遍历一次

（5）用clearInterval（定时器名称）的方法去清除定时器(定时器创建后是需要清除的)

代码如下：

<style>

text-align: center;

}

div{

width: 500px;

height: 200px;

line-height: 200px;

font-size: 10px;

margin: auto;

border: 1px solid #000;

font-weight: bold;

}

button{

width: 500px;

margin-top: 20px;

font-size: 50px;

}

</style>

//所有人的名字放进数组

var arr = ['张三','里斯','王五','张倩','孙俪'];

var timer;//接收定时器的变量

btn.onclick = function(){

if(btn.innerText == '开始'){

this.innerText = '停止';

timer = setInterval(function(){

//获取随机数

var index = parseInt(Math.random()*arr.length)

//将随机获取到的数组下标对应的同学放入box框中

box.innerText = arr[index];

},30)

}else{

this.innerText = '开始';

//结束每间隔30毫秒做的事情

clearInterval(timer);

}

</script>

<style>*{text-align: center;}div{width: 500px;height: 200px;line-height: 200px;font-size: 10px;margin: auto;border: 1px solid #000;font-weight: bold;}button{width: 500px;margin-top: 20px;font-size: 50px;}</style>

<h1>2108-点歌台</h1><div id="box">胡歌</div><button id="btn">开始</button>

<script>//所有人的名字放进数组var arr = ['张三','里斯','王五','张倩','孙俪'];var timer;//接收定时器的变量btn.onclick = function(){if(btn.innerText == '开始'){this.innerText = '停止';timer = setInterval(function(){//获取随机数var index = parseInt(Math.random()*arr.length)//将随机获取到的数组下标对应的同学放入box框中box.innerText = arr[index];},30)}else{this.innerText = '开始';//结束每间隔30毫秒做的事情clearInterval(timer);}}</script>

javaScript数组：点歌台、抽奖功能（分析+代码）相关推荐

基于微信的【点歌台】功能开发
FROM: https://www.ldsun.com/-e5-9f-ba-e4-ba-8e-e5-be-ae-e4-bf-a1-e7-9a-84-e3-80-90-e7-82-b9-e6-ad-8c ...
HTML+JavaScript实现一个简单抽奖功能
HTML+JavaScript实现一个简单抽奖功能 emmm,闲的蛋疼,没事做,软考也不想复习为什么会做这个东西呢,纯属好玩,闲的其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答当 ...
php9宫格抽奖程序_PHP实现抽奖功能实例代码
在项目开发中经常会遇到花钱抽奖类型的需求.但是老板总是担心用户用小钱抽到大奖.这样会导致项目亏损.下边这段代码可以有效制止抽奖项目亏钱. 个人奖池: 语言:thinkphp redis mysql 表 ...
php mysql随机抽奖源码_PHP实现抽奖功能实例代码
在项目开发中经常会遇到花钱抽奖类型的需求.但是老板总是担心用户用小钱抽到大奖.这样会导致项目亏损.下边这段代码可以有效制止抽奖项目亏钱. 个人奖池: 语言:thinkphp redis mysql 表 ...
Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
java实现点歌操作_Java中linked list集合实现KTV点歌台功能
Java中linked list集合实现KTV点歌台功能 //Java实现KTV点歌台基础功能 import java.util.*; public class KTV { public static ...
原生js完成一个简单的抽奖功能
文章目录前言实现过程 1.前期准备 2.CSS美化 3.使用 js 完成抽奖功能 3.1 随机数模块 3.2 随机奖品 3.3 开始抽奖 3.4 点击开始抽奖完整代码 HTML部分 CSS部分 ...
C#保留2位小数几种场景总结游标遍历所有数据库循环执行修改数据库的sql命令原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断...
C#保留2位小数几种场景总结场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...
IVX低代码平台开发——微信小程序实现抽奖功能
写在前面通过利用可视化编程实现微信小程序的抽奖功能,带大家初步了解 iVX 的强大之处. 文章目录写在前面 iVX开发抽奖功能实现 iVX开发基本介绍 iVX是一个 "零代码&quo ...
瑞吉外卖项目详细分析笔记及所有功能补充代码
目录项目刨析简介技术栈项目介绍项目源码一.架构搭建 1.初始化项目结构 2.数据库表结构设计 3.项目基本配置信息添加公共字段的自动填充全局异常处理类返回结果封装的实体类二.管理端业 ...

javaScript数组：点歌台、抽奖功能（分析+代码）

javaScript数组：点歌台、抽奖功能（分析+代码）相关推荐

最新文章

热门文章