很奇怪，可能你们都会问为什么我会突然写一个抽奖系统呢？
其实起因是最近我公司年底抽奖，大会前一晚突然收到社长信息(晚上11点了),说想在大会上搞个自动抽奖的东东，最好酷炫点的。第二天就要用了，因为太急我就想到了用我最擅长的js做个简单的出来。
其实做个抽奖系统很简单，里面只要一个随机函数就可以了。
以下文章来自公众号[Honker],可在公众号内查看学习资料,免费获取~
前提：我公司大会上是每人都有一个签的，签上有号码，共389人。
按照惯例，先给大伙看看样子~
两行文字，两个按钮，一个随机数，足矣。
[界面还行吧！调文字颜色调了好久]
这个界面的html非常简单，总共就21行代码，body标签里面就只剩8行了~一起来看看吧。CSS样式还是由你们自行想象
我来解释一下，因为时间比较紧迫(赶着睡觉[滑稽])，我引入了Bootstrap框架用于主容器的布局(container)和button的外观(class里面的btn-primary和btn-danger)。简单快捷又好看
布局完界面后，重头戏当然还是js文件，里面写着随机数函数嘛
在下图可以看到，我是先定义了一个空数组装随机数的，getRandom()函数就是圈定随机数的范围。
获取完随机数后用push方法把得到的随机数传到array数组。
最后再把数组输出在id为one的div里就可以咯。
插播一个科普：
push()方法其实就是向数组的末尾添加一个或多个新元素，看一下w3school的实例就明了啦
因为我的先前定义的array数组是空的，所以加一个元素进去也就只显示那个元素
到这里随机数就已经搞定了。
我的想法是什么呢？当然是点击START就开始，点击STOP就结束啊！不然要那两个按钮还搞得这么漂亮干什么
继续写函数！这两个函数就是控制开始停止的，看我注释应该看得懂，不多说了
最后！在html页面设置一个js DOM的０级事件(onclick)，大功告成！
看到下面那个value="stop"了吗？就是和上图函数写的判断if(mark==‘stop’)有关联。
第二天彩排，社长说有一共30份礼物，一个一个抽太慢了…他想一抽就是30个，好吧！然后我又临时改了一波～
就改了下面两个地方，html页面加多两个div就行了
js函数改动如下，把Array.push()放在一个循环30次的for循环里，表示生成30个存随机数的数组。
然后用innerHTML把30个数组分别十个十个地放在3个div里。
最终效果就是酱紫：
------------进阶版本------------
有些酷友可能会说上面的只能在代码里改范围，不方便。ok，那进阶版本就来做个可以自定义输入范围的吧~
其实这个也很简单，只需要改下html布局和js的函数就可以了。
说下思路：设置两个搜索框用于用户输入范围，然后用js获取输入框里面的数值丢到random函数里就ok
首先在html文件中写两个输入框(input)，下面红色框中就是新增的部分
然后改下js的函数，因为我们先要获取到输入框的数值才能进行下面的步骤，所以在函数开头我们先定义两个变量mini和maxi，分别用于储存在input1和input2获取的内容。
强调一下，这里细心的酷友应该会发现下面我把获取到的value转换成数字(number)类型了，其实是因为getElementById获取到的是字符串(string)。那为什么我要保留两个字符串类型的呢？请看下面解释~
接下来再加个判断就ok啦！加判断的原因是：因为用户有时候会手误输入了一些不正确的数字导致运行错误，所以我设置把min == max、min > max的情况和是否有输入都输出一个提示，其他情况就正常运行。
红色框里是判断部分。黄色框里是判断用户是否有输入(判断长度只能在字符串使用，所以要保留字符串类型)；蓝色框是判断min和max是否相等，和min是否大于max。绿色框就是把min和max丢进getRandom函数里面。
看看最终的效果吧！
想要源码请点击这里哦
提取码：chdr