Open Source!教你用js做一个简单的抽奖系统~

时间:2024-03-23 22:29:11

Open Source!教你用js做一个简单的抽奖系统~
很奇怪,可能你们都会问为什么我会突然写一个抽奖系统呢?

其实起因是最近我公司年底抽奖,大会前一晚突然收到社长信息(晚上11点了),说想在大会上搞个自动抽奖的东东,最好酷炫点的。第二天就要用了,因为太急我就想到了用我最擅长的js做个简单的出来。

其实做个抽奖系统很简单,里面只要一个随机函数就可以了。

以下文章来自公众号[Honker],可在公众号内查看学习资料,免费获取~

前提:我公司大会上是每人都有一个签的,签上有号码,共389人。

按照惯例,先给大伙看看样子~
Open Source!教你用js做一个简单的抽奖系统~
两行文字,两个按钮,一个随机数,足矣。

[界面还行吧!调文字颜色调了好久]

这个界面的html非常简单,总共就21行代码,body标签里面就只剩8行了~一起来看看吧。CSS样式还是由你们自行想象
Open Source!教你用js做一个简单的抽奖系统~
我来解释一下,因为时间比较紧迫(赶着睡觉[滑稽]),我引入了Bootstrap框架用于主容器的布局(container)和button的外观(class里面的btn-primary和btn-danger)。简单快捷又好看

布局完界面后,重头戏当然还是js文件,里面写着随机数函数嘛

在下图可以看到,我是先定义了一个空数组装随机数的,getRandom()函数就是圈定随机数的范围。

获取完随机数后用push方法把得到的随机数传到array数组。

最后再把数组输出在id为one的div里就可以咯。
Open Source!教你用js做一个简单的抽奖系统~
插播一个科普:

push()方法其实就是向数组的末尾添加一个或多个新元素,看一下w3school的实例就明了啦

因为我的先前定义的array数组是空的,所以加一个元素进去也就只显示那个元素

Open Source!教你用js做一个简单的抽奖系统~
到这里随机数就已经搞定了。

我的想法是什么呢?当然是点击START就开始,点击STOP就结束啊!不然要那两个按钮还搞得这么漂亮干什么

继续写函数!这两个函数就是控制开始停止的,看我注释应该看得懂,不多说了
Open Source!教你用js做一个简单的抽奖系统~
最后!在html页面设置一个js DOM的0级事件(onclick),大功告成!

看到下面那个value="stop"了吗?就是和上图函数写的判断if(mark==‘stop’)有关联。

Open Source!教你用js做一个简单的抽奖系统~
第二天彩排,社长说有一共30份礼物,一个一个抽太慢了…他想一抽就是30个,好吧!然后我又临时改了一波~

就改了下面两个地方,html页面加多两个div就行了
Open Source!教你用js做一个简单的抽奖系统~
js函数改动如下,把Array.push()放在一个循环30次的for循环里,表示生成30个存随机数的数组。

然后用innerHTML把30个数组分别十个十个地放在3个div里。
Open Source!教你用js做一个简单的抽奖系统~
最终效果就是酱紫:
Open Source!教你用js做一个简单的抽奖系统~
------------进阶版本------------

有些酷友可能会说上面的只能在代码里改范围,不方便。ok,那进阶版本就来做个可以自定义输入范围的吧~

其实这个也很简单,只需要改下html布局和js的函数就可以了。

说下思路:设置两个搜索框用于用户输入范围,然后用js获取输入框里面的数值丢到random函数里就ok

首先在html文件中写两个输入框(input),下面红色框中就是新增的部分
Open Source!教你用js做一个简单的抽奖系统~
然后改下js的函数,因为我们先要获取到输入框的数值才能进行下面的步骤,所以在函数开头我们先定义两个变量mini和maxi,分别用于储存在input1和input2获取的内容。
Open Source!教你用js做一个简单的抽奖系统~
强调一下,这里细心的酷友应该会发现下面我把获取到的value转换成数字(number)类型了,其实是因为getElementById获取到的是字符串(string)。那为什么我要保留两个字符串类型的呢?请看下面解释~

接下来再加个判断就ok啦!加判断的原因是:因为用户有时候会手误输入了一些不正确的数字导致运行错误,所以我设置把min == max、min > max的情况和是否有输入都输出一个提示,其他情况就正常运行。
Open Source!教你用js做一个简单的抽奖系统~
红色框里是判断部分。黄色框里是判断用户是否有输入(判断长度只能在字符串使用,所以要保留字符串类型);蓝色框是判断min和max是否相等,和min是否大于max。绿色框就是把min和max丢进getRandom函数里面。

看看最终的效果吧!
Open Source!教你用js做一个简单的抽奖系统~
想要源码请点击这里

提取码:chdr