首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript实现班级抽签小程序

Posted in Javascript onMay 19, 2021

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

项目展示

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

JavaScript实现班级抽签小程序

JavaScript实现班级抽签小程序

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JavaScript实现班级抽签小程序

- Author -

是榆榆啊

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
js实现文本框选中的方法
May 26 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
JS提示：Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
详解基于iview-ui的导航栏路径（面包屑）配置
Feb 22 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
JS实现扫雷项目总结
深入浅析React中diff算法
May 19 #Javascript
Vue Element UI自定义描述列表组件
js实现模拟购物商城案例
ztree+ajax实现文件树下载功能
May 18 #Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
一文带你理解vue创建一个后台管理系统流程（Vue+Element）
dockerfile(1) Django(9) Tsmoothie(1) reduce(2) Selenium(1) pytz(1) SQLite3(1) 分布式锁(3) 短信验证码(1) filter(1)
You might like
php split汉字
2009/06/05 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
变量在 PHP7 内部的实现（一）
2015/12/21 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
javascript textContent与innerText的异同分析
2010/10/22 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
教大家使用Python SqlAlchemy
2016/02/12 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
Python如何获取Win7，Win10系统缩放大小
2020/01/10 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
倩碧美国官网：Clinique美国
2016/07/20 全球购物
Scholastic父母商店：儿童书籍
2017/01/01 全球购物
菲律宾领先的在线时尚商店：Zalora菲律宾
2018/02/08 全球购物
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
保护环境倡议书
2014/04/14 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
2014年度思想工作总结
2014/11/27 职场文书
企业党员岗位承诺书
2015/04/27 职场文书