html+css+js写抽奖程序

灰太狼 2024-03-30 17:11 90阅读 0赞

## html+css+js写抽奖程序 ##

简介：本文讲解，如何使用html+css+js写抽奖程序，后面也会加上后端，记录每一次的抽奖的结果。

### HTML结构 ###

这个html结构就十分的简单，几行而已。

### CSS结构 ###

通过简单的css的渲染，然后使得这个显示的结果是这个样子，这些都是很简单那的，主要是需要思考的是这个，js的逻辑怎么编写。  
![在这里插入图片描述][92e87341796a4cd5ae42fed36d281a3b.png]

### js逻辑 ###

*  这是本程序最需要思考的地方，比如如何产生随机数了，我这里如何产生\[n,m\]之间的随机数，使用的方法就是，使用公式`Math.floor(Math.random() * (m - n + 1)) + 1`，通过这个公式就可以产生\[n,m\]之间的随机数。
 *  当我们完成了随机数的产生工作之后，现在需要思考的就是，我们产生的随机数需要可以重复，这个时候，我们遇到重复了的之后，就需要重来一次。  
    依靠的就是Set容器的has方法就可以判断是否，这个当前的随机值已经在容器中存在了，然后了如果存在了的话，在使用那么就通过循环重新生成一次，直到这个结果不同了为止，这个是利用Set容器的特性实现的。
 *  然后当我们现在抽到奖品了之后，我们现在需要的是，如何将对应的奖品号，与奖品信息对应，一般人可能的最直接的想法就是if或者是switch容器的方法，但是了我这里用到的就是Map字典，通过这个可以更好的实现这个功能，对于没有中中奖的号码，我们反馈的是谢谢惠顾字样。

代码如下：

### 完整代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        .box{
          
            margin: 50% 50%;
            display: inline-block;
        }
        .btn{
          
            display: inline-block;
            margin-left: 40%;
        }
        #top{
          
            margin-left: 15%;
        }
    </style>
    <body>
        <div class="box">
            <div id="top"></div>
            <input id="input">
            <div class="btn">
                <button id="btn">抽奖</button>
            </div>
        </div>    
    </body>
    <script>
        function fcRandom(n, m){
          
            // 生成范围为[n, m]的随机数 
            let r = Math.floor(Math.random() * (m - n + 1)) + 1;        
            return r;
        }
        // 默认抽奖次数
        var cnt = 3;
    
        var top = document.getElementById("top").innerHTML = "现在还剩" + cnt + "次机会";    
        var input = document.getElementById("input");
        var btn = document.getElementById("btn");
    
        // 存放用户的抽奖结果
        var set = new Set();
    
        // 存放抽奖号与与之对应的奖品信息
        let mp = new Map([
            [1, "一等奖"],
            [33, "二等奖"],
            [95, "三等奖"],
            [100, "四等奖"],
            [99 ,  "五等奖"]        
        ]);
        // console.log(mp.get(2)===undefined);
    
        document.getElementById("btn").onclick = function(){
          
            cnt --;
            // console.log(cnt)
            top = document.getElementById("top").innerHTML = "现在还剩" + cnt + "次机会";
            
            // 生成抽奖号[1, 100]
            let res = fcRandom(1, 100);
            
            // 去重检测
            while(set.has(res)){
          
                res = fcRandom(1, 100);            
            }
    
            // 不重复的话就加进去
            set.add(res);
           if (mp.get(res)===undefined){
          
            res = "抽奖号为：" + res + " 奖品为：" + "谢谢惠顾";
           } else {
          
            res = "抽奖号为：" + res + " 奖品为：" + mp.get(res);
           }
            input.value= res;        
            
            if (cnt <= 0){
          
                // 机会用完了之后，把按钮设置为禁用
                alert("你的机会已经用完了");
                btn.setAttribute("disabled",true);
                input.value="谢谢惠顾";        
            }        
            let a = new Set();
            // console.log("我被点了")        
        }
    </script>
    </html>

[92e87341796a4cd5ae42fed36d281a3b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/40a565eae4ba415bbc426b24bb31666c.png