html+css+js写抽奖程序

GeekLiHua

发布于 2025-01-21 19:41:42

4300

代码可运行

文章被收录于专栏：JavaJava

运行总次数：0

代码可运行

html+css+js写抽奖程序

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

HTML结构

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

<body>
    <div class="box">
        <div id="top"></div>
        <input id="input">
        <div class="btn">
            <button id="btn">抽奖</button>
        </div>
    </div>    
</body>

CSS结构

通过简单的css的渲染，然后使得这个显示的结果是这个样子，这些都是很简单那的，主要是需要思考的是这个，js的逻辑怎么编写。

<style>
    .box{
        margin: 50% 50%;
        display: inline-block;
    }
    .btn{
        display: inline-block;
        margin-left: 40%;
    }
    #top{
        margin-left: 15%;
    }
</style>

js逻辑

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

代码如下：

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

完整代码

<!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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-02-01，如有侵权请联系 cloudcommunity@tencent.com 删除

程序