写个小玩意（一）- 抽奖器（随机数与定时器）

写个小玩意（一）- 抽奖器（随机数与定时器）

写在前面： 这也许将会是一个系列，希望能够长久坚持下去，同时，作为一个初学者，我深知自己代码不精优化无力，如果各位有什么好想法/建议/批评，尽管在评论区提出来，谢谢啦。

---

需求

东南某高校某学院要举办迎新晚会，中间有一个抽奖环节，希望能够对在座的所有同学们抽奖，要求随机生成座位，并显示在屏幕上。

话说，，这个需求太笼统了对不对，，，我当时也是这么想的，，学生会的这些兄dei们让我有一种没有毕业就碰到程序员天敌（产品经理）的错觉。
事实证明，功能实在太简单了，没什么需求可以提，，，至少给我设计个界面嘛。

开工&踩坑

既然是一个静态页面，那么就简单的分成这么几个步骤好了：

• 样式
• 功能实现
  • 随机数
  • 闪烁显示效果
• 测试

第一步，样式

先放一个body出来

这个body看似没什么问题，但是在使用了web-font之后就尴尬了起来，后面我们进行解释

经过一番调整css，变成了这个样子（请不要在意空空如也的背景）

这个时候，，问题来了这个字体真的好丑啊！！！！！
于是，我找了酷炫的web-font，在这里特别感谢有字库，大家有需要可也以去看看

一般情况下，这个字体是需要联网使用的，我们只要在html文件中引入如下代码

<script type="text/javascript">
        $youziku.load("body", "2472a578bf1b476cab25f17391006097", "HappyZcool-2016");
        /*$youziku.load("#id1,.class1,h1", "2472a578bf1b476cab25f17391006097", "HappyZcool-2016");*/
        /*．．．*/
        $youziku.draw();
    </script>

当然了，不同的字体不尽相同，在这里我抖了个机灵，进入链接，直接把字体的源码copy一份下来，保存为本地文件，这样就可以不联网使用了，现在我们的页面变成了这样子~

这个诡异的空位和换行是什么鬼！！！！
于是问题来了，这是为什么呢？
我先后测试了不同浏览器下和不同字体下得到结论：
这个字体给空格设置了非零的内容宽度，导致它占位
（亏我还测试了各种浏览器，还调整了好久css）
这时，解决的办法就是修改一下上面的html，去掉多余的换行的空格

<div id="randSeat"><span id="row">00</span>排<span id="num">00</span>号</div>

这个效果图我们最后在放出来，下面进入功能实现。

第二步，功能

取随机座位号

大家经常用的取随机数的方法就是调用Math中的方法，假定我们想得到m~n之间的随机数，区间为 [ m, n ]，我们可以用这样的方法

function getRD(m, n) {
   return Math.floor(Math.random() * (n - m + 1) + m);
}

Math.random()方法得到的是一个位于区间 [0, 1) 的小数，如果我们要获得整数只要和区间大小相乘就可以，并进行舍入处理。
同时，在Math.floor()，parseInt()，Math.ceil 中我们要进行适当的取舍，其中Math.floor()，parseInt() 是向下取整，Math.ceil 是向上取整，然后将这个值和最小值相加就能得到区间内的随机数。

// this.rowNums.min是最小行号，，，this.rowNnms.max是最大行号
// this.seatNums是保存着所有行号对应的座位号的数组
let rowNum = getRD(this.rowNnms.min,this.rowNnms.max);
let seatNum = getRD(1,this.seatNums[rowNum-2]);

闪烁显示效果

为了让随机的效果更加明显的呈现在观众的面前，我们可以在主持人喊停之前一直让数字不停的跳动，我选择的方式是不断对这个数字的DOM节点通过innerHTML 进行赋值
第一点
我们要用到setInterval()函数来实现闪烁效果，这个函数的第一个参数是要执行的函数名，第二个参数是执行这个函数的时间间隔。比如：

let sayHello = function(){
	console.log("hello");
}
let interval = setInterval(sayHello,100);//每100ms执行一次sayHello()

第二点
如果主持人想要进行多次抽奖，我们最好是能够让这个函数反复执行的过程暂停。JS中并没有直接的暂停和启动函数，只有clearInterval(interval) 来让这个周期终止，如果想要在启动周期性执行就得重新调用setInterval
因此我设置了一个flag来标记当前是调用clearInterval(interval) 还是 setInterval

if(!this.flag){
	this.interval = setInterval(this.setValue.bind(this),100);
}else{
	clearInterval(this.interval);
}
this.flag = !this.flag;

将上述内容绑定到button上即可

封装

为了以后能够重用这个定时器，我进行了粗陋的封装

// 获得随机数函数
function getRD(m,n) {
    return Math.floor(Math.random() * (n-m+1) + m);
}

class RandomSeat{
    //构造函数，对options进行拷贝
    constructor(options){
        //初始化
        this.container = options.container;     //容器
        this.seatNums = options.seatNums;       //存有座位号的数组
        this.rowNnms = options.rowNnms;         //排号范围
        this.flag = false;                      //闪烁效果启动/停止的标记
        this.interval = null;                   //setInterval返回的对象
        //创建DOM节点
        this.createEle();
        //缓存节点
        this.row = this.container.getElementsByClassName("row")[0];
        this.num = this.container.getElementsByClassName("num")[0];
        this.control = document.getElementById("control");
        //事件注册
        this.addEvent();
    }

    //获得随机的座位数
    setValue(){
        let rowNum = getRD(this.rowNnms.min,this.rowNnms.max);  //随机排号
        let seatNum = getRD(1,this.seatNums[rowNum-2]);         //随机座号
        //设置值
        this.row.innerHTML = rowNum;        
        this.num.innerHTML = seatNum;
    }

    // 创建DOM元素
    createEle(){
        this.container.innerHTML = "<div class=\"randomSeat\">\n" +
            "            <p><span class=\"row\">0</span>号<span class=\"num\">0</span>号</p>\n" +
            "\n" +
            "            <div class=\"control\">\n" +
            "                <label for=\"control\">control</label><button id=\"control\" style=\"display:none\"></button>\n" +
            "            </div>\n" +
            "        </div>";
    }

    //注册事件
    addEvent(){
        this.control.onclick = function () {
            if(!this.flag){
                this.interval = setInterval(this.setValue.bind(this),100);
            }else{
                clearInterval(this.interval);
            }
            this.flag = !this.flag;
        }.bind(this);
    }
}

使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="container">
	<!-- 随机座位号 -->
    </div>

<script>
	window.onload = function () {
	    let container= document.getElementById("container");
	
	    let options = {
	        container:container,
	        seatNums:[33,34,35,34,35,36,37,38,37,38,39,39,39,40,36,39,40,39,36,39,40,39,40,39,40,40,38],
	        rowNnms:{min:2,max:24}
	    };
	
	    let rs = new RandomSeat(options);
	};
</script>
<script src="js/randomSeat.js"></script>
</body>
</html>