原生js完成一个简单的抽奖功能

最新推荐文章于 2024-05-11 17:08:08 发布
置顶 最新推荐文章于 2024-05-11 17:08:08 发布
阅读量2.8k 收藏 31
点赞数 8
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53452298/article/details/122017796
版权

文章目录

前言

抽奖在我们生活中经常见到,例如上课点名，商场活动等,今天就教大家怎么用原生js写一个抽奖功能的代码。

在这里插入图片描述

实现过程

1.前期准备

虽然这个控件功能单一，但我们还是需要先分析一下它的结构，以及实现的功能
首先是HTML结构部分,HTML结构代码如下:

<div class="box">
        <!-- 头部 -->
        <div id="top">
            学号: <span>xx</span> 姓名:
            <span>xxx</span> 奖项:
            <span>xxx</span>
        </div>
        <!-- 主体部分 -->
        <div id="main">
            <span>张晨曦</span>
            <span>曹晨磊</span>
            <span>萧炎</span>
            <span>周润发</span>
            <span>王思聪</span>
            <span>毛不易</span>
            <span>房东的猫</span>
            <span>周杰伦</span>
            <span>薛之谦</span>
            <span>张雨生</span>
            <span>沈腾</span>
            <span>张杰</span>
            <span>林俊杰</span>
            <span>张碧晨</span>
            <span>汪苏泷</span>
            <span>双笙</span>
            <span>胡歌</span>
            <span>张艺兴</span>
            <span>刘德华</span>
            <span>黎明</span>
            <span>张学友</span>
            <span>郭富城</span>
            <span>张若昀</span>
            <span>雷军</span>
            <span>余承东</span>
            <span>卢伟冰</span>
            <span>提灯寻猫</span>
        </div>
        <!-- 抽奖按钮 -->
        <div id="luck_btn">
            <button>开始抽奖</button>
        </div>
    </div>

看上去是不是很简单，一共分成了3个部分

  • 头部分放置中奖者的信息
  • 主体部分放置参与的人员
  • 尾部部分放置抽奖按钮来控制中奖人是谁

2.CSS美化

HTML基本的样式我们已经搭建好了,但这样的页面看上去很"丑",接下来我们就用CSS给HTML页面打扮一番。

首先我们要清除浏览器自带的默认边距,将每个盒子设置为CSS盒子模型,这样的话,我们的盒子不会因为内边距和边框使得盒子撑大起来。接着我们给整体的大盒子设置宽高,让盒子居中显示,给盒子来一个边框,看上去不会那样单一。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.box {
    width: 660px;
    height: 600px;
    /* background-color: aqua; */
    margin: 50px auto;
    border: 1px solid #e1e1e1;
}

接下来就是对头部部分进行一次处理

  • 给头部部分的盒子(top)设置宽高,实际上宽是不用设置的,它会继承父类的宽
  • 给这个盒子设置弹性布局,使得里面的每一个子项都会变成行内块元素
  • 使用justify-content: center 和 align-items:center使子项水平垂直方向上实现居中效果
  • 因为这里的主轴和交叉轴,我们没有调,所以一切按默认的来
#top {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 30px;
    /* background-color: aquamarine; */
    /* padding: 0 16px; */
    align-items: center;
    border: 1px solid #e1e1e1;
}

#top span {
    color: red;
    font-size: 12px;
    margin: 0 15px;
}

到了我们的重头戏——主体部分,为什么说是重头戏,因为这里牵扯了很多知识点,初学HTML的小伙伴一想到的就是我中间套一个 ul , ul 由多个 li 组成,在利用浮动进行排版。而这种方式并不是最好的,我们可以采用一种新颖的布局方式——网格布局。

ps:博主也是用这样的方式进行布局,但学到了网格布局,才觉得这网格布局也太神奇了

  • 首先我们要将主体部分设置为网格布局( display=“gird” ),使得每一个子项变为行内块元素
  • 将每一个子项进行四等分(grid-template-columns: 1fr 1fr 1fr 1fr;),这样的话,每一个子项的大小就是一样的
  • 使用grid-row-gap 和 grid-column-gap设置子项的行列间距
  • 给每一个子项设置弹性布局,使用justify-content: center 和 align-items:center使子项中的元素水平垂直方向上实现居中效果
#main {
    display: grid;
    width: 100%;
    /* 将布局中的元素4等分 */
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* 每个子项之间的行列间隙为20px */
    grid-row-gap: 20px;
    grid-column-gap: 20px;
}

#main span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background-color: skyblue;
}

最后就是我们的尾部部分,布局十分简单

  • 使用一个div盒子包住一个button按钮
  • 给盒子设置弹性布局,使用justify-content: center是子项居中显示即可
#luck_btn {
    width: 100px;
    height: 50px;
    margin: 50px auto;
}

#luck_btn button {
    width: 100px;
    height: 50px;
}


/* 抽中后显示的样式 */

#main .show {
    background-color: thistle;
    border: 1px solid yellow;
}

3.使用 js 完成抽奖功能

这里我们用外部引入js方式来做。
首先我们要写一个入口函数

// DOMContentLoaded不包含图片 falsh css 等就可以执行
window.addEventListener('DOMContentLoaded', function() {
   
})

接着我们要获取事件源(看上去很长,但是可以准确的获取到我们需要的元素)

// 获取提示信息
    let top_spans = document.getElementById('top').querySelectorAll('span');
    console.log(top_spans);
    // 获取人员名单
    let mian_spans = document.getElementById('main').querySelectorAll('span');
    console.log(mian_spans);
    // 获取抽奖按钮
    let luck_btn = document.getElementById('luck_btn').querySelector('button');

对于我们的抽奖功能来说,它由三大模块组成

1.生成随机数
2.获得的奖品
3.开始抽奖
3.1 随机数模块

主要用到Math数学对象中的random()方法来完成

function randomNumber(min, max) {
        // 比较两数之间的大小
        // 这里用三元运算符来作比较
       	// 这里不要命名和形参一样的变量,会造成变量冲突的问题
        let _max = max > min ? max : min;
        let _min = min < max ? min : max;
        // 返回随机数区间
        return Math.floor(Math.random() * _max + _min)
    }
3.2 随机奖品

通过数组的方式存放奖品

 function randomPrize() {
        // 用数组存放奖品
        let prize = ["你不知道的JavaScript", "Python从入门到精通", "Node.js深入浅出", "谢谢参与"]
            // 返回抽到的值
        return prize[Math.floor(Math.random() * prize.length + 0)]
    }
3.3 开始抽奖

这一块的内容主要调用了上面两大模块来完成

    function luckDraw() {
        //生成随机数 
        let num = randomNumber(0, mian_spans.length);
        // console.log(num);
        // 这里用到排他思想
        for (let i = 0; i < mian_spans.length; i++) {
            mian_spans[i].className = '';
        }
        // 自身添加类
        mian_spans[num].classList = 'show';
        // 这里使用了补0操作
        // 操作学号
        let temp = num < 10 ? "0" + num : num
        top_spans[0].innerHTML = +temp + 1;
        // 操作中奖人
        top_spans[1].innerHTML = mian_spans[num].innerHTML;
        // 抽中的奖品
        top_spans[2].innerHTML = randomPrize();

    }
3.4 点击开始抽奖
  • 这里我们给获取到的按钮luck_draw添加一个点击事件
  • 点击后将“开始抽奖”变为“停止抽奖”
  • 通过计时器的方式来调用开始抽奖这个模块,即setInterval() 方法,这里面有两个参数,第一个为一个回调函数,第二个为时间,这里的时间是以毫秒为单位
  • 我们要停止时.就要将"停止抽奖"改为“开始抽奖”,并使用 clearInterval() 的方式清除定时器,同时我们要用一个变量将上面的定时器存储起来,因为我们清除定时器是要穿一个值进去,而非一个匿名函数
 luck_btn.addEventListener("click", function() {
        if (this.innerHTML == "开始抽奖") {
            this.innerHTML = "停止抽奖";
            // 调用抽奖模块
            item = setInterval(luckDraw, 50)
        } else {
            this.innerHTML = "开始抽奖";
            clearInterval(item);
        }
    })

完整代码

HTML部分

<!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>抽奖</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js"></script>
</head>

<body>
    <div class="box">
        <!-- 头部 -->
        <div id="top">
            学号: <span>xx</span> 姓名:
            <span>xxx</span> 奖项:
            <span>xxx</span>
        </div>
        <!-- 主体部分 -->
        <div id="main">
            <span>张晨曦</span>
            <span>曹晨磊</span>
            <span>萧炎</span>
            <span>周润发</span>
            <span>王思聪</span>
            <span>毛不易</span>
            <span>房东的猫</span>
            <span>周杰伦</span>
            <span>薛之谦</span>
            <span>张雨生</span>
            <span>沈腾</span>
            <span>张杰</span>
            <span>林俊杰</span>
            <span>张碧晨</span>
            <span>汪苏泷</span>
            <span>双笙</span>
            <span>胡歌</span>
            <span>张艺兴</span>
            <span>刘德华</span>
            <span>黎明</span>
            <span>张学友</span>
            <span>郭富城</span>
            <span>张若昀</span>
            <span>雷军</span>
            <span>余承东</span>
            <span>卢伟冰</span>
            <span>提灯寻猫</span>
        </div>
        <!-- 抽奖按钮 -->
        <div id="luck_btn">
            <button>开始抽奖</button>
        </div>
    </div>
</body>

</html>

CSS部分

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.box {
    width: 660px;
    height: 600px;
    /* background-color: aqua; */
    margin: 50px auto;
    border: 1px solid #e1e1e1;
}


/* 头部 */

#top {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 30px;
    /* background-color: aquamarine; */
    /* padding: 0 16px; */
    align-items: center;
    border: 1px solid #e1e1e1;
}

#top span {
    color: red;
    font-size: 12px;
    margin: 0 15px;
}


/* 主体 */

#main {
    display: grid;
    width: 100%;
    /* 将布局中的元素4等分 */
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* 每个子项之间的行列间隙为20px */
    grid-row-gap: 20px;
    grid-column-gap: 20px;
}

#main span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background-color: skyblue;
}


/* 抽奖 */

#luck_btn {
    width: 100px;
    height: 50px;
    margin: 50px auto;
}

#luck_btn button {
    width: 100px;
    height: 50px;
}


/* 抽中后显示的样式 */

#main .show {
    background-color: thistle;
    border: 1px solid yellow;
}

js部分

// DOMContentLoaded不包含图片 falsh css 等就可以执行
window.addEventListener('DOMContentLoaded', function() {
    // console.log(123);
    // 获取提示信息
    let top_spans = document.getElementById('top').querySelectorAll('span');
    console.log(top_spans);
    // 获取人员名单
    let mian_spans = document.getElementById('main').querySelectorAll('span');
    console.log(mian_spans);
    // 获取抽奖按钮
    let luck_btn = document.getElementById('luck_btn').querySelector('button');
    console.log(luck_btn);


    //抽奖功能一共有三个模块
    // 1.生成随机数
    // 2.获得的奖品
    // 3.开始抽奖

    // 1随机数
    function randomNumber(min, max) {
        // 比较两数之间的大小
        // 这里用三元运算符来作比较
        let _max = max > min ? max : min;
        let _min = min < max ? min : max;
        // 返回随机数区间
        return Math.floor(Math.random() * _max + _min)
    }

    // 2随机奖品
    function randomPrize() {
        // 用数组存放奖品
        let prize = ["你不知道的JavaScript", "Python从入门到精通", "Node.js深入浅出", "谢谢参与"]
            // 返回抽到的值
        return prize[Math.floor(Math.random() * prize.length + 0)]
    }

    // 3开始抽奖
    function luckDraw() {
        //生成随机数 
        let num = randomNumber(0, mian_spans.length);
        // console.log(num);
        // 这里用到排他思想
        for (let i = 0; i < mian_spans.length; i++) {
            mian_spans[i].className = '';
        }
        // 自身添加类
        mian_spans[num].classList = 'show';
        // 这里使用了补0操作
        // 操作学号
        let temp = num < 10 ? "0" + num : num
        top_spans[0].innerHTML = +temp + 1;
        // 操作中奖人
        top_spans[1].innerHTML = mian_spans[num].innerHTML;
        // 抽中的奖品
        top_spans[2].innerHTML = randomPrize();

    }
    luck_btn.addEventListener("click", function() {
        if (this.innerHTML == "开始抽奖") {
            this.innerHTML = "停止抽奖";
            // 调用抽奖模块
            item = setInterval(luckDraw, 50)
        } else {
            this.innerHTML = "开始抽奖";
            clearInterval(item);
        }
    })

})

总结

以上就是抽奖功能的完整代码,如果有什么写的不对的地方,请指正.

提灯寻猫
关注
  • 8
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS实现九宫格抽奖
10-14
主要为大家详细介绍了原生JS九宫格抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JS实现九宫格抽奖效果
10-20
总结来说，这个原生JS实现的九宫格抽奖效果利用了JavaScript的DOM操作、事件监听、定时器以及随机数生成等技术，展示了动态效果和随机逻辑在网页交互中的应用。通过理解这段代码，开发者可以进一步提升自己的...
js实现抽奖效果
qq_64746086的博客
04-19 292
点击开始抽奖 奖品将会随机变换。点击停止抽奖 奖品定住。
js做抽奖
weixin_56674431的博客
05-26 808
用js做一个简单的抽奖游戏。
js+css动画实现横向滚动抽奖效果实现
最新发布
qq_53001158的博客
05-11 565
实现使用js+css动画实现横向滚动抽奖动画
js随机数
m0_50570745的博客
04-06 4万+
js产生随机数通常是使用javascript的Math.random()函数 常用的几种方法：Math.random()表示:结果为0-1之间（包括0,不包括1）； Math.floor(Math.random()*10+1)表示结果为1-10之间的一个随机数 Math.floor(Math.random()*24)表示结果为0-23间的随机数 1.Math.random();返回0-1之间的随机数，可能为0，但是总是小于1，[0,1) 返回指定范围随机数(m~n)之间的范围的公式为： Math
原生js实现轮盘抽奖，控制中奖概率(完整示例)
marendu的博客
07-29 3万+
文章目录1.实现旋转2.控制得奖概率3. 控制旋转动画落点4.测试概率完整代码 本想找一个现成的，结果发现网上只有能实现转了，但是效果并不是让人很满意，于是我就借鉴一个样式，重新改了js实现，效果如下： 图片素材：(网上一搜就有=-=) pointer.png turntable.png turntable-bg.jpg 1.实现旋转 原理很简单，就是通过css动画来实现旋转动画，用js来控制旋转度， img[src^="turntable"] { posi
用JavaScript做一个简易抽奖的效果
weixin_70747888的博客
03-28 837
用JavaScript做一个简易抽奖的效果
javascript编写的抽奖小程序
热门推荐
草木红的博客
08-01 12万+
js写的抽奖系统，旨在提供一个思路
原生js实现抽奖小游戏
10-16
这篇教程主要讲解如何使用原生JavaScript实现一个简单的抽奖或随机点名小游戏。首先，我们来看游戏的基础HTML结构。游戏界面包含一个包裹元素`.wrapper`，其中有一个无序列表`.box`用于显示可选的奖品或名字，两个...
js实现的一个简易抽奖
11-22
js实现的一个简易抽奖. 基本功能都实现，其他自己扩展
js抽奖系统
05-20
自己写的一个简单的js抽奖系统，能实抽取一等奖，二等奖，三等奖
JS实现手机号码抽奖功能
04-16
用js实现的手机号码抽奖功能，由三等奖开始抽取，填满三等奖，填二等奖，之后填1等奖，源码完整，可以改！
js抽奖（跑马灯效果）
07-24
js做的一个抽奖demo,有加速和减速效果。开始前先获取中奖号吗，效果结束时自动选中。
在线抽奖js
09-16
在线抽奖，使用Js Jquery 实现滚动式在线抽奖效果，可以用作年会抽奖
js 滚动手机号随机抽奖
01-12
真实有效，如果对各位有效的，请回来给我一个好评，谢谢！
好用的原生JavaScript九宫格抽奖插件
08-28
javaScript原生九宫格抽奖插件，适用于跳转性抽奖效果，具体抽奖数目和样式可自行设置 特点：原生插件，体积小 使用方法： var lottery=new Lottery({ prefix:"lottery-unit",//抽奖元素类名前缀 例如：class=...
js实现公司年会抽奖活动（亲测可用）
m0_71349739的博客
01-12 1135
1.首先设置奖励数组。2.设置random随机数。3.给点击按钮做一个防抖动作，避免用户在多次点击造成性能浪费，然后设置0.1秒随机给li标签添加高亮显示，首先要forEach循环li标签，清除所有的高亮。4.设置空数组，将抽到的奖励放到这个数组中，进行渲染页面。5.判断是否点击了开始抽奖按钮，点击结束抽奖按钮，清除定时器。
js实现抽奖功能
zybijiso666的博客
08-01 402
【代码】js实现抽奖功能。
用原生JS写一个完整答题功能
09-15
要用原生JS写一个完整的答题功能，需要以下步骤： 1. 设计题目数据结构：首先，确定题目的数据结构，可以使用数组对象等数据结构保存每个题目的问题、选项和正确答案等信息。 2. 动态生成题目界面：根据题目数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值