可控制的抽奖模拟系统（利用setInterval）

最新推荐文章于 2021-03-18 14:01:28 发布

原创最新推荐文章于 2021-03-18 14:01:28 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#抽奖箱 #新手 #IT

综合运用专栏收录该内容

3 篇文章

订阅专栏

通过学习Math.random函数，作者实现了一个可控制的抽奖箱程序。该程序使用HTML、CSS和JavaScript编写，能够模拟真实抽奖场景，支持开始和结束按钮控制随机数字滚动，并记录获奖编号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自学到现在也有接近一个月了
刚好学到了Math.random，就想着这种随机数可以模拟抽奖箱，想着做一个当做自己的第一个项目（→ →小声喃喃）
网上有一位兄台做的抽奖箱是10秒一次输出结果，其中过程无法自控。因此在他的一些启发下，我也制作了自己的抽奖箱。

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <mata http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>抽奖箱子</title>
        <style type="text/css">
            #boxer{
                border: 5px solid aqua;
                border-radius: 20px;
                width: 500px;
                font-size: 100px;
                text-align: center;
            }
            #but1{
                position: relative;
                left: 200px;
                top: 10px;
            }
        </style>
    </head>
    <body "oneHundry()">
        <div id="boxer">Go!</div>
        <div id="but1">
            <input type="button" value="开始" "randomNumber();">
            <input type="button" value="结束" "outset();">
        </div><br />
        获奖名单:<div id="list"></div>
        <script>
            var arr = new Array(100);
            function oneHundry(){
                for(var i=0 ; i<100 ;i++){
                    arr[i]=i+1;
                }
            }
            var interset,outset;
            var index;
            function randomNumber(){
                clearInterval(interset);
                interset = setInterval(function(){
                    index = Math.floor(Math.random()*arr.length);
                    document.getElementById("boxer").innerHTML=arr[index];
                },50); 
            }
            function outset(){
                clearInterval(interset);
                document.getElementById("list").innerHTML += arr[index] + "<br />";
                arr.splice(index,1);
            }
        </script>
    </body>
</html>

这个抽奖箱是可控的，按下开始数字开始随机滚动，按下结束键可以停止（clearInterval）并输出结果
考虑到现实生活中把每个人的名字录入太麻烦，我就想着以编号的形式更加方便快捷，
因此利用了最近学习的for循环来创建一个1-100的数组。
如果想覆盖的话可以将+=改为=并去掉

最后的splice是为了删除每一次输出的值，毕竟一个人得无数次就有点不好了→ →