JavaScript实现随机抽奖功能

通过数组存储抽奖号码，点击按钮实现名字/号码的滚动，点击停止即可实现抽奖功能

设置一个定时器，使用random方法随机获取号码，当点击按钮时去掉计时器实现暂停功能。

思路解析：

（1）抽奖功能的名字滚动可以使用定时器都是获取名单中的数据；

（2）为了保证随机性，可使用random()方法随机获取名单中的数据，以此达到随机滚动的效果；

（3）点击抽奖的功能可以通过关闭定时器实现，让屏幕只显示以此random后的数据，实现获取抽奖结果。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{/* background: url(img/allOfUs.jpg); */background-size:100%;background-attachment: fixed;}h1{font-size: 50px;font-family: "courier new";color: aqua;}.container{width: 70%;height: 450px;border: 1px solid #ccc;margin: 100px  auto;padding: 5px;align-items: center;line-height: 50px;text-align: center;backdrop-filter: blur(10px);}.show_name{align-items: center;border: #00FFFF 1px solid;width: 250px;height: 120px;line-height: 80px;text-align: center;margin: auto;}h2{font-size: 30px;}.choose{margin-top: 15px;}input{width: 80px;height: 40px;margin: 10px;border: aliceblue;border-radius: 10px;font-size: 17px;color: brown;}</style></head><body><div class="container" ><h1>大&nbsp; &nbsp;奖&nbsp; &nbsp;得&nbsp; &nbsp;主</h1><div  class="show_name"><h2 id="title">大&nbsp;家</h2></div><div class="choose"><input id="but" type="button"  value="开 始"/></div></div><script>var flag=0;var arr = ['阿呷', '曾&nbsp;各','陈羽','陈&nbsp;吧','丁发', '杜子发', '严&nbsp;辉','洪发','曾富','真帅','帅得很','好帅','这么帅']// 通过id拿到h2的标签var title = document.getElementById('title')var timer = null function start() {timer = setInterval(function() {var index = Math.floor(Math.random() * arr.length)// 把index对应的数组的内容放到h2标签里面title.innerHTML = arr[index]}, 100)}function end() {// 通过timer来控制开始按钮clearInterval(timer)}but.onclick=function(){if(flag==0){flag++;but.value='停止';start();}else{flag--;but.value='开始';end();}}</script></body>
</html>

效果图：

开始界面：

滚动界面效果：

JavaScript实现随机抽奖功能相关推荐

利用JavaScript实现随机抽奖代码
利用JavaScript实现随机抽奖代码一.分析: 二.部分重要功能代码: 1.body页面: 2.通过点击事件来显示随机号码: 3.设置中奖号码: 4.判断是否中奖的方法三.全部代码实现: 图片 ...
JavaWeb——使用JavaScript实现随机抽奖
实验名称: 使用 JavaScript实现随机抽奖实验目的: 1. 掌握JavaScript的基本语法及定 ...
JS实现随机抽奖功能
点击开始按钮开始抽奖,div依次变红!下面是js代码,需要的自取 <script>var but1 = document.getElementById("btn1")v ...
html年会抽奖代码实例,基于JavaScript实现简单抽奖功能代码实例
为什么会做这个东西呢,纯属好玩,闲的其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答当时就想,我如果抽签抽到你了,你还是不回答吗??好吧,一切都是扯淡先来看看页面效果吧: 点击抽取 ...
JavaScript实现随机抽奖代码
点击开始抽奖,然后设定人员开始不定的改变,直到点击停止为止代码如下 <div class="div"><h2>Who?</h2><img ...
给你30秒的时间，你会用Excel制作出一个抽奖功能吗？
一说到抽奖,大家都是想到最近的"支付宝锦鲤信小呆",但是今天跟大家谈论的不是这个,而是:你会用Excel制作抽奖功能吗?可能大家都不知道Excel有这么多的神技能,但是你不知道的还 ...
随机循环抽奖小程序_c语言,基于JavaScript实现简单的随机抽奖小程序
对于抽奖这样的小程序使用诸如VB,Delphi等工具来实现会比较的方便,由于本人机器上没有装这样的应用程序,所以只能另寻其道.为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行,开发工具和编译 ...
HTML+JavaScript实现一个简单抽奖功能
HTML+JavaScript实现一个简单抽奖功能 emmm,闲的蛋疼,没事做,软考也不想复习为什么会做这个东西呢,纯属好玩,闲的其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答当 ...
JavaScript网页特效-“扫雷”游戏随机布雷功能
"扫雷"游戏是一款经典益智小游戏.游戏目标是在最短的时间内找出所有非雷格子,同时避免踩雷,踩到一个雷即全盘皆输.本节介绍"扫雷"游戏随机布雷功能的设计与实现. ...
php mysql随机抽奖源码_PHP实现抽奖功能实例代码
在项目开发中经常会遇到花钱抽奖类型的需求.但是老板总是担心用户用小钱抽到大奖.这样会导致项目亏损.下边这段代码可以有效制止抽奖项目亏钱. 个人奖池: 语言:thinkphp redis mysql 表 ...

JavaScript实现随机抽奖功能

思路解析：

JavaScript实现随机抽奖功能相关推荐

最新文章

热门文章