首页
所有分类
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 相关文章推荐
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
JS实现扫雷项目总结
深入浅析React中diff算法
May 19 #Javascript
Vue Element UI自定义描述列表组件
js实现模拟购物商城案例
ztree+ajax实现文件树下载功能
May 18 #Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
一文带你理解vue创建一个后台管理系统流程（Vue+Element）
VOLVO(1) E1-XM(1) 军机(1) ETON(1) 沃尔沃(1) S900(1) R601SW(1) 放大器(1) DSP(2) 矿石收音机(1)
You might like
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
jQuery的slideToggle方法实例
2013/05/07 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
用python写扫雷游戏实例代码分享
2018/05/27 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
Python tkinter模版代码实例
2020/02/05 Python
python 连续不等式语法糖实例
2020/04/15 Python
python操作链表的示例代码
2020/09/27 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
COACH德国官方网站：纽约现代奢侈品牌，1941年
2018/06/09 全球购物
夏威夷咖啡公司：Hawaii Coffee Company
2019/09/19 全球购物
Marc O’Polo俄罗斯官方在线商店：德国高端时尚品牌
2019/12/26 全球购物
十佳中学生事迹材料
2014/06/02 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
Python 多线程处理任务实例
2021/11/07 Python