HTML: 网页摇奖机（抽号机）
- 背景
- 一、需求分析
- 二、网页设计
- 1、界面设计
- a. 取色
- b.标题和背景
- c.按钮与输入框
- 2、随机数逻辑设计
- 3、完整代码
- 三、效果展示
- 总结
背景
前两天回了趟高中，当年的英语老师正在教高三。高三嘛，过来人都懂，日均小测。就帮英语老师写一个抽号数的网页，也算是学以致用。
一、需求分析
毕竟是高三，争分夺秒的时候，不能在操作摇奖机上浪费太多时间。我们高中每个班都有配带触控的大屏幕，所以对老师来说，最好是那种点以下出一个数字，不需要太多操作的“傻瓜机”。所以网页是比较合适的选择，界面也是简洁为主。
总结一下：
- 操作便捷，按一下出一个数字
- 可以修改总人数(每个班人数不一定刚好相等)
- 界面简洁
二、网页设计
1、界面设计
a. 取色
界面的布局，大致思路是希望有一个标题，然后一个按钮，按钮下方再放一个可以修改人数的输入框。既然是英语老师要的，自然是全英为好。纯白的背景会显得比较工地风，虽然实际上是个很朴素的项目，但是还是要装得高大上一些，所以倾向于用偏深色的背景。
*这里推荐一个macOS平台的取色软件：
提供了许多主题类型的RGB颜色
可以自己修改，然后直接生成16进制码，非常方便。
b.标题和背景
主体背景采用深色#010c1e
<body style="background-color: #010c1e;" onload="init()">
//something to be code
</body>标题：exiting lottery(亦可赛艇的彩票 口, ,口)采用亮黄色。并附带一个我的GitHub链接和副标题。
文字内容都是居中，比较好看。
<body style="background-color: #010c1e;" onload="init()">
<h1 style="text-align:center;"><font color="#fffc40">exciting lottery</font></h1>
<h2 style="text-align:center;">
<a href="http://www.github.com/Concyclics" title="visit my GitHub.">
<font style="font-size: 16px;">by Concyclics</font>
</a>
</h2>
<h3 style="text-align:center;"><font color="#faba61">↓ today's lucky number ↓</font></h3>
</body>当前效果：
c.按钮与输入框
这里用<center> </center>令内容居中。
<center>
<button onclick="lucky_student()">
<font style="text-aligin:center;line-height:40px;font-size:80px;" color="#001e38"; id="target">
click
</font>
</button>
<form>
<p></p>
<font color="#faba61">headcount:</font>
<input type="text" id="inputN" value="60" size="10">
<input type="button" value="enter" onclick="get_total()">
</form>
</center>把圆角边界改到和长宽一样大，让按钮变成一个圆形的，比较好看。
<style>
button
{
width: 300px;
height: 300px;
background-color: #c6cdd7;
border-radius:900px;
}
</style>按钮与输入框效果：
2、随机数逻辑设计
首先，要有一个默认的总人数，这里设置为60。
<script>
var total=60;
</script>然后设置把输入框内数字改成默认总人数的函数和读取输入框中输入数字更改总人数的函数。
<script>
var total=60;
function init()
{
document.getElementById("inputN").value=total;
}
function get_total()
{
var n=document.getElementById("inputN").value;
total=n;
}
</script>初始化函数在“body”加载的时候调用。
<body style="background-color: #010c1e;" onload="init()">然后设计随机数的生成函数。JavaScript里random函数的返回值是一个介于0～1之间的浮点数。菜鸟教程: JavaScript random() 方法
类型 | 描述 |
Number | 0.0 ~ 1.0（不包含） 之间的一个伪随机数。 |
为了让数变成一个整数，我们可以给它乘上一个数，如果这个数比较小，那么在%总人数时，会导致部分人的被抽中的概率变大。比方乘100，%60，那么前40个号被抽中的概率是后20个人的两倍。所以我们可以乘一个足够大的数字，再膜去总人数后+1s。
像这样：
<script>
var total=60;
function lucky_student()
{
document.getElementById("target").style.color="#fffc40";
var lucky_number=(Math.floor((Math.random()*19260817))%total+1);
document.getElementById("target").innerHTML=lucky_number;
}
</script>然后在每次按钮被点击时把按钮中的数字改成生成的随机数即可。
<button onclick="lucky_student()">3、完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>exciting lottery(www.github.com/Concyclics)</title>
</head>
<script>
var total=60;
function init()
{
document.getElementById("inputN").value=total;
}
function sleep (time)
{
return new Promise((resolve) => setTimeout(resolve, time));
}
function lucky_student()
{
document.getElementById("target").style.color="#fffc40";
var lucky_number=(Math.floor((Math.random()*19260817))%total+1);
document.getElementById("target").innerHTML=lucky_number;
}
function get_total()
{
var n=document.getElementById("inputN").value;
total=n;
}
</script>
<body style="background-color: #010c1e;" onload="init()">
<h1 style="text-align:center;"><font color="#fffc40">exciting lottery</font></h1>
<h2 style="text-align:center;">
<a href="http://www.github.com/Concyclics" title="visit my GitHub.">
<font style="font-size: 16px;">by Concyclics</font>
</a>
</h2>
<h3 style="text-align:center;"><font color="#faba61">↓ today's lucky number ↓</font></h3>
<center>
<button onclick="lucky_student()">
<font style="text-aligin:center;line-height:40px;font-size:80px;" color="#001e38"; id="target">
click
</font>
</button>
<form>
<p></p>
<font color="#faba61">headcount:</font>
<input type="text" id="inputN" value="60" size="10">
<input type="button" value="enter" onclick="get_total()">
</form>
</center>
</body>
<style>
button
{
width: 300px;
height: 300px;
background-color: #c6cdd7;
border-radius:900px;
}
</style>
</html>三、效果展示
总结
祝三中的小朋友们小测愉快(´｡･v･｡｀)。
另外求个一键三连QwQ。
