网页摇奖机（抽号机）2.0

concyclics

于 2021-08-29 00:32:35 发布

阅读量4.1w

点赞数 7

分类专栏：前端文章标签： html5 javascript html 网页设计

本文链接：https://blog.csdn.net/qq_21008741/article/details/119975135

版权

前端专栏收录该内容

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="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">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>

走过路过点个赞赞吧QwQ！

concyclics

关注

7
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
网页摇奖机（抽号机）2.0

**网页摇奖机（抽号机）2.0背景一、改进需求分析二、改进代码1、前端修改2、后端修改三、完整代码走过路过点个赞赞吧QwQ！背景话说上回,我帮高中老师做了个抽号机，然后：现在老师们的花样也是越来越多啦，学弟学妹们多多保重。既然侃哥都这么说了，那么2.0版本开工！（实际上顶多算1.1）一、改进需求分析在对某个小组进行测试，那么可以给号数设置起点，比方从1号开始的20个人，或者从21号开始的20个人。这样做比起设置左右端点，减少了端点l<r的校验，也更容易编写。二、改进代码1、前端修改
复制链接

扫一扫