网页摇奖机（抽号机）2.0
网页摇奖机（抽号机）2.0
- 背景
- 一、改进需求分析
- 二、改进代码
- 1、前端修改
- 2、后端修改
- 三、完整代码
- 走过路过点个赞赞吧QwQ！
背景
话说上回,我帮高中老师做了个抽号机，然后：
现在老师们的花样也是越来越多啦，学弟学妹们多多保重。
既然侃哥都这么说了，那么2.0版本开工！（实际上顶多算1.1）
一、改进需求分析
在对某个小组进行测试，那么可以给号数设置起点，比方从1号开始的20个人，或者从21号开始的20个人。这样做比起设置左右端点，减少了端点l<r的校验，也更容易编写。
二、改进代码
1、前端修改
//前两行为新增
<font color="#faba61">begin:</font>
<input type="text" id="input BG" value="1" size="5">
<font color="#faba61"> headcount:</font>
<input type="text" id="inputN" value="60" size="5">
<input type="button" value="enter" onclick="get_total()">
我们新增加一个输入框，并把原输入框尺寸一并调小至5，使布局跟工整。
效果:
2、后端修改
新增变量begin并在初始化函数中添加初始化begin。
<script>
var total=60;
var begin=1;
function init()
{
document.getElementById("inputN").value=total;
document.getElementById("inputBG").value=begin;
}
</script>
给生成的幸运数字加上begin-1(因为是从begin开始，所以要减去端点的1，这里可以和前面的+1抵消)。
最终修改成如下。
<script>
function lucky_student()
{
document.getElementById("target").style.color="#fffc40";
var lucky_number=(Math.floor((Math.random()*19260817))%total+Number(begin));
document.getElementById("target").innerHTML=lucky_number;
}
</script>
这里要注意一个细节，在JS中 只有 减乘除 才会自动转化为数字。加法需要通过 Number(value)进行显示转化。
在读入输入的函数中添加从begin: 框内读入的数字。
<script>
function get_total()
{
n=document.getElementById("inputN").value;
begin=document.getElementById("inputBG").value;
}
</script>
三、完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>exciting lottery(www.github.com/Concyclics)</title>
</head>
<script>
var total=60;
var begin=1;
function init()
{
document.getElementById("inputN").value=total;
document.getElementById("inputBG").value=begin;
}
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+Number(begin));
document.getElementById("target").innerHTML=lucky_number;
}
function get_total()
{
total=document.getElementById("inputN").value;
begin=document.getElementById("inputBG").value;
}
</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="" 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">begin:</font>
<input type="text" id="inputBG" value="1" size="5">
<font color="#faba61">headcount:</font>
<input type="text" id="inputN" value="60" size="5">
<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>