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 相关文章推荐
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
javascript数组去重小结
Mar 07 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
JS实现扫雷项目总结
深入浅析React中diff算法
May 19 #Javascript
Vue Element UI自定义描述列表组件
js实现模拟购物商城案例
ztree+ajax实现文件树下载功能
May 18 #Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
You might like
PHP的AES加密算法完整实例
2016/07/20 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
Python 异常处理实例详解
2014/03/12 Python
Python下的twisted框架入门指引
2015/04/15 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
基于Python实现文件大小输出
2016/01/11 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
详解Python:面向对象编程
2019/04/10 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
自学考试自我鉴定范文
2013/09/26 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
教师节商场活动方案
2014/02/13 职场文书
企业理念标语
2014/06/09 职场文书
入党现实表现材料
2014/12/23 职场文书
委托函范文
2015/01/29 职场文书
离职告别感言
2015/08/04 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL