JavaScript实现班级抽签小程序

2024-04-02 19:04:59 797人浏览泡泡鱼

摘要

本文实例为大家分享了javascript实现班级抽签小程序的具体代码，供大家参考，具体内容如下项目展示项目中假设一个班只有三十个人 html结构 <div cla

本文实例为大家分享了javascript实现班级抽签小程序的具体代码，供大家参考，具体内容如下

项目展示

项目中假设一个班只有三十个人

html结构


<div class="outerContainer">
    <div class="question">请问你要抽几个xx班的小宝贝呢？</div>

    <div class="number">
        <input type="text" style="color: #999;" value="请输入需要的人数" onblur="if (this.value == '') {this.value = '请输入需要的人数';this.style.color = '#999';}" onfocus="if (this.value == '请输入需要的人数') {this.value = '';this.style.color = '#424242';}">
    </div>

    <div class="btnWrapper">
        <button>开始抽签</button>
    </div>

    <div class="viewDiv"></div>

    <div class="foot">制作者：chenyu-max</div>
</div>

CSS层叠样式


.outerContainer {
    margin-top: 100px;
}

.question {
    margin-top: 30px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 25px;
    transition: all .3s linear; 
    
    text-align: center;
}

.number {
    margin-top: 30px;
    display: block;
    left: 200px;
    text-align: center;
}

.number input {
    height: 30px;
    font-size: 20px;
    line-height: 30px;
}

.btnWrapper {
    margin-top: 30px;
    width: 100%;
    height: 30px;
    text-align: center;
}

.btnWrapper button {
    outline: none;
    color: rgb(233, 8, 8);
    cursor: pointer;
    border-radius: 15px;
    width: 100px;
    height: 25px;
    line-height: 19px;
}

.viewDiv {
    margin: 20px auto;
    width: 900px;
    height: 300px;
    text-align: center;
    font-size: 30px;
    line-height: 50px;
    border: 1px solid black;
}

.foot {
    margin: 0 auto;
    text-align: center;
}

js逻辑

获取dom元素


var input = document.getElementsByTagName('input')[0];
var viewDiv = document.getElementsByClassName('viewDiv')[0];
var btn = document.getElementsByTagName('button')[0];
var question = document.getElementsByClassName('question')[0];

其余变量


var arr = [];   // 存放抽取处的学号
var count = 0;   // 计数器，用以 question 的颜色修改

question的颜色变化


setInterval(function() {
    var temp = count % 6;
    switch (temp) {
        case 0:
            question.style.color = 'red';
            break;
        case 1:
            question.style.color = 'green';
            break;
        case 2:
            question.style.color = 'blue';
            break;
        case 3:
            question.style.color = 'grey';
            break;
        case 4:
            question.style.color = 'purple';
            break;
        case 5:
            question.style.color = 'black';
            break;
        default:
            break;
    }
    count++;
}, 700);

抽奖逻辑


btn.onclick = function() {
    // 检查输入的内容是否是是1~30人
    // 若是班级人数不止三十人，改成 input.value < 班级人数 + 1
    var check = (function() {
        if (input.value > 0 && input.value < 31) {
            return true;
        } else {
            return false;
        }
    }());

    // 如果输入的是正确的，那么进行抽签
    if (check) {
        var num = input.value;
        arr = [];
        for (var i = 0; arr.length < num; i++) {
            // 生成1 ~ 30 的随机数
            // 需要更改人数，直接修改 乘号后面的 30 未你们班需要的人数即可
            var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30
            var flag = true;
            arr.forEach(function(value) {
                // 遍历数组，防止生成的随机数和已有的数字重复
                if (value == temp) {
                    flag = false;
                }
            })
            if (flag) {
                arr.push(temp);
            }
        }

        // 将抽出的人数的学号进行升序排序
        arr.sort(function(a, b) {
            return a - b;
        })


        var str = arr.join(", ");
        viewDiv.innerHTML = " <span style='color : red'>恭喜以下小可爱/帅哥 被抽中！</span> </br> " + str;
    } else {
        // 若不是，则输出错误提示
        // 人数可以修改
        viewDiv.innerHTML = "<span style='color : red'>请输入正确的人数（1 ~ 30）哦</span>";
    }
}

增加功能


document.onkeydown = function(e) {
    // 摁下回车键 触发 btn 的onclick事件
    if (e.keyCode == 13) {
        btn.onclick();
    }
}

全部代码


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>给xx班小宝贝来个抽签</title>
    <link rel="icon" href="">
    <style>
        .outerContainer {
            margin-top: 100px;
        }
        
        .question {
            margin-top: 30px;
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 25px;
            transition: all .3s linear;
            text-align: center;
        }
        
        .number {
            margin-top: 30px;
            display: block;
            left: 200px;
            text-align: center;
        }
        
        .number input {
            height: 30px;
            font-size: 20px;
            line-height: 30px;
        }
        
        .btnWrapper {
            margin-top: 30px;
            width: 100%;
            height: 30px;
            text-align: center;
        }
        
        .btnWrapper button {
            outline: none;
            color: rgb(233, 8, 8);
            cursor: pointer;
            border-radius: 15px;
            width: 100px;
            height: 25px;
            line-height: 19px;
        }
        
        .viewDiv {
            margin: 20px auto;
            width: 900px;
            height: 300px;
            text-align: center;
            font-size: 30px;
            line-height: 50px;
            border: 1px solid black;
        }
        
        .foot {
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="outerContainer">
        <div class="question">请问你要抽几个xx班的小宝贝呢？</div>

        <div class="number">
            <input type="text" style="color: #999;" value="请输入需要的人数" onblur="if (this.value == '') {this.value = '请输入需要的人数';this.style.color = '#999';}" onfocus="if (this.value == '请输入需要的人数') {this.value = '';this.style.color = '#424242';}">
        </div>

        <div class="btnWrapper">
            <button>开始抽签</button>
        </div>

        <div class="viewDiv"></div>

        <div class="foot">制作者：chenyu-max</div>
    </div>

    <script>
        var input = document.getElementsByTagName('input')[0];
        var viewDiv = document.getElementsByClassName('viewDiv')[0];
        var btn = document.getElementsByTagName('button')[0];
        var question = document.getElementsByClassName('question')[0];

        var arr = []; // 存放抽取处的学号
        var count = 0; // 计数器，用以question 的颜色修改器
        setInterval(function() {
            var temp = count % 6;
            switch (temp) {
                case 0:
                    question.style.color = 'red';
                    break;
                case 1:
                    question.style.color = 'green';
                    break;
                case 2:
                    question.style.color = 'blue';
                    break;
                case 3:
                    question.style.color = 'grey';
                    break;
                case 4:
                    question.style.color = 'purple';
                    break;
                case 5:
                    question.style.color = 'black';
                    break;
                default:
                    break;
            }
            count++;
        }, 700);


        document.onkeydown = function(e) {
            // 摁下回车键 触发 btn 的onclick事件
            if (e.keyCode == 13) {
                btn.onclick();
            }
        }

        btn.onclick = function() {
            // 检查输入的内容是否是是1~30人
            // 若是班级人数不止三十人，改成 input.value < 班级人数 + 1
            var check = (function() {
                if (input.value > 0 && input.value < 31) {
                    return true;
                } else {
                    return false;
                }
            }());

            // 如果输入的是正确的，那么进行抽签
            if (check) {
                var num = input.value;
                arr = [];
                for (var i = 0; arr.length < num; i++) {
                    // 生成1 ~ 30 的随机数
                    // 需要更改人数，直接修改 乘号后面的 30 未你们班需要的人数即可
                    var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30
                    var flag = true;
                    arr.forEach(function(value) {
                        // 遍历数组，防止生成的随机数和已有的数字重复
                        if (value == temp) {
                            flag = false;
                        }
                    })
                    if (flag) {
                        arr.push(temp);
                    }
                }

                // 将抽出的人数的学号进行升序排序
                arr.sort(function(a, b) {
                    return a - b;
                })


                var str = arr.join(", ");
                viewDiv.innerHTML = " <span style='color : red'>恭喜以下小可爱/帅哥 被抽中！</span> </br> " + str;
            } else {
                // 若不是，则输出错误提示
                // 人数可以修改
                viewDiv.innerHTML = "<span style='color : red'>请输入正确的人数（1 ~ 30）哦</span>";
            }
        }
    </script>
</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript实现班级抽签小程序

本文链接: https://www.lsjlt.com/news/126355.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

JavaScript实现班级抽签小程序

本文实例为大家分享了JavaScript实现班级抽签小程序的具体代码，供大家参考，具体内容如下项目展示项目中假设一个班只有三十个人 html结构 <div cla...

99+

2024-04-02
JavaScript如何实现班级抽签小程序

这篇文章给大家分享的是有关JavaScript如何实现班级抽签小程序的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。项目展示项目中假设一个班只有三十个人html结构<div class="...

99+

2023-06-15
小程序实现筛子抽奖

本文实例为大家分享了小程序实现筛子抽奖的具体代码，供大家参考，具体内容如下效果图  <view ...

99+

2024-04-02
小程序如何实现筛子抽奖

这篇文章主要介绍小程序如何实现筛子抽奖，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！本文实例为大家分享了小程序实现筛子抽奖的具体代码，供大家参考，具体内容如下效果图<!--pages/shaizi/index....

99+

2023-06-15
小程序实现手写签名

本文实例为大家分享了小程序实现手写签名的具体代码，供大家参考，具体内容如下方法不是我自己写的，但是也忘记最初的原版出自于哪里了，不过搜索下来就是大同小异，我就附上自己实测有效的！可...

99+

2024-04-02
如何使用Python实现抽奖小程序

下面是一个简单的Python代码示例，实现一个抽奖小程序： import random participants = ['...

99+

2024-03-01

Python
小程序实现手写板签名

本文实例为大家分享了小程序实现手写板签名的具体代码，供大家参考，具体内容如下 1.wxss代码 page { background: #F8F8F8; } .qianmin...

99+

2024-04-02
小程序原生实现左滑抽屉菜单

目录WXS 响应事件方案A页面结构和样式WXS 事件回调函数WXS 脚本遮罩层方案B为什么要使用 WXS结语 & 参考资料参考资料：在移动端，侧滑菜单是一个很常用的组件（通常...

99+

2024-04-02
微信小程序实现走马灯式抽奖

本文实例为大家分享了微信小程序实现走马灯式抽奖的具体代码，供大家参考，具体内容如下先来看下效果设置奖项 awardList是从后台拿到的奖项数组，list不够八位时填充谢谢参与...

99+

2024-04-02
小程序如何实现左滑抽屉菜单

这篇文章将为大家详细讲解有关小程序如何实现左滑抽屉菜单，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。在移动端，侧滑菜单是一个很常用的组件（通常称作 Drawer，抽屉）。因为现在手机屏幕太大，点击角落的菜...

99+

2023-06-20
微信小程序实现手写签名

本文实例为大家分享了微信小程序实现手写签名的具体代码，供大家参考，具体内容如下本示例具备的功能： 1、笔迹绘制 2、笔迹清空以下是js代码： var content = null...

99+

2024-04-02
小程序实现手写签名功能

小程序利用canvas实现手写签名，供大家参考，具体内容如下设置小程序横屏在page.json或对应页面 .json文件中设置landscape代表固定横屏 "pageOrie...

99+

2024-04-02
微信小程序实现手写签名(签字版)

本文实例为大家分享了微信小程序实现手写签名的具体代码，供大家参考，具体内容如下公司近期有个需要用户签名的功能，就用小程序canvas写了个 wxml <view class...

99+

2024-04-02
微信小程序实现电子签名

本文实例为大家分享了微信小程序实现电子签名的具体代码，供大家参考，具体内容如下 <view class="sign-contain"> <view class...

99+

2024-04-02
微信小程序实现简单九宫格抽奖

本文实例为大家分享了微信小程序实现简单九宫格抽奖的具体代码，供大家参考，具体内容如下废话不多说，先上样板图代码就先wxml文件： <view id="container"...

99+

2024-04-02
微信小程序怎么实现抽奖大转盘

这篇“微信小程序怎么实现抽奖大转盘”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序怎么实现抽奖大转盘”文章吧。界面就...

99+

2023-06-26
用Python实现一个简单的抽奖小程序

目录写在前面实现结果 1 数据拉取2 数据清洗、去重3 中奖数据抽取python 相关知识点总结写在前面因为粉丝福利，所以想自己写一个抽...

99+

2023-05-12

python抽奖系统 python随机抽奖 python抽奖游戏
微信小程序转盘抽奖的实现方法

本文实例为大家分享了微信小程序实现转盘抽奖的具体代码，供大家参考，具体内容如下 lucky-draw.wxss： .lucky_draw_zp{ width: 502rpx; hei...

99+

2024-04-02
微信小程序canvas实现手写签名

本文实例为大家分享了微信小程序canvas实现手写签名的具体代码，供大家参考，具体内容如下很多时候，程序中需要用到签名的功能，附上源码（微信小程序） .wxml <view...

99+

2024-04-02
微信小程序实现星级评分

本文实例为大家分享了微信小程序实现星级评分的具体代码，供大家参考，具体内容如下第一种方法： WXML代码： <view> 星级评分 </view&g...

99+

2024-04-02