html+css+js写抽奖程序_html抽奖程序代码

最新推荐文章于 2025-06-09 06:03:38 发布

2401_84166306

最新推荐文章于 2025-06-09 06:03:38 发布

阅读量328

点赞数 7

文章标签： html css javascript

本文链接：https://blog.youkuaiyun.com/2401_84166306/article/details/139815993

版权

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); 
 }

 // 不重复的话就加进去


![img](https://img-blog.csdnimg.cn/img_convert/bad8be367a7f8863de0ddc26bc6a120b.png)
![img](https://img-blog.csdnimg.cn/img_convert/099241f767cc47cf0196d3d6a0ed9f24.png)

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

...(img-7w7Ft5sQ-4701985625644)]
[外链图片转存中...(img-4LZI05OH-4701985625644)]

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**