您的位置：首页 > 其它

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

2018-02-02 21:53 127 查看

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

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

需求

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

话说，，这个需求太笼统了对不对，，，我当时也是这么想的，，学生会的这些兄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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航