html+css+js写抽奖程序

简介: html+css+js写抽奖程序

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>

如果大家觉得有用的话,可以关注我下面的微信公众号,极客李华,我会在里面更新更多行业资讯,企业面试内容,编程资源,如何写出可以让大厂面试官眼前一亮的简历等内容,让大家更好学习编程,我的抖音,B站也叫极客李华。大家喜欢也可以关注一下

相关文章
|
26天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
40 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
143 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
61 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
68 34
|
2月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
97 33
|
2月前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
39 2
|
3月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
123 24
|
2月前
|
JavaScript
jQuery+HTML5实现的微信大转盘抽奖源码
这是一款基于jQuery+HTML5实现的微信大转盘抽奖效果源码,是一款可配置奖品抽奖的jQuery大转盘抽奖代码,可实现点击按钮转轮旋转实现抽奖功能,效果逼真自然,代码里面有详细的注释,可以修改文字或者二次开发都可以
54 11
|
2月前
|
移动开发 HTML5
HTML5实现的手机验证抽奖领券效果源码
这是一款基于HTML5实现的手机验证抽奖领券效果源码。在输入框输入手机号码即可点击下方的按钮来进行抽奖游戏,中奖后还会弹出提示信息,是一款比较经典的抽奖游戏源码
71 9
|
4月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
245 1

热门文章

最新文章